/* Step 22 — player stats. Win / draw / loss share the explorer's polarity:
   blue, neutral grey, red (the eval graph's Sente/Gote hues), and every bar
   carries its numbers in text beside it and in a tooltip. */
.stats {
  --res-w: #1C7FBE;
  --res-d: #8C8375;
  --res-l: #BE4A34;
  --chart-line: #2C4A63;
  max-width: 1000px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.stat-tiles--small { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat-tile { padding: 14px 16px; border-radius: 10px; background: var(--paper-deep); border: 1px solid var(--paper-edge); }
.stat-tile__label { display: block; font: 600 .72rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.stat-tile__value { display: block; font: 700 1.9rem/1.2 'Shippori Mincho', serif; font-variant-numeric: tabular-nums; }
.stat-tile__sub { display: block; font-size: .8rem; color: var(--ink-soft); }

.stats-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stats-table th { text-align: left; font: 600 .72rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 6px; border-bottom: 1px solid var(--paper-edge); }
.stats-table td { padding: 8px 6px; border-bottom: 1px solid var(--paper-edge); }
.outcome { font-weight: 700; }
.outcome::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--res-d); }
.outcome--win::before { background: var(--res-w); }
.outcome--loss::before { background: var(--res-l); }
.tag-ranked { margin-left: 6px; font: 600 .7rem system-ui, sans-serif; padding: 1px 6px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo); }

.stats-key { display: flex; gap: 14px; font-size: .8rem; color: var(--ink-soft); }
.stats-key .k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.stats-key .k-w::before { background: var(--res-w); }
.stats-key .k-d::before { background: var(--res-d); }
.stats-key .k-l::before { background: var(--res-l); }

.split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; }
.split h3 { margin: 10px 0 8px; font-family: 'Shippori Mincho', serif; font-size: 1.05rem; }
.split-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-bottom: 12px; }
.split-row__label { font-weight: 600; }
.split-row__n { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.split-row .result-bar { grid-column: 1 / -1; }
.result-bar { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: var(--paper); }
.result-bar__seg { min-width: 3px; }
.result-bar__seg--w { background: var(--res-w); }
.result-bar__seg--d { background: var(--res-d); }
.result-bar__seg--l { background: var(--res-l); }

.stats-chart { position: relative; margin-top: 8px; }
.stats-chart .grid { stroke: var(--paper-edge); stroke-width: 1; }
.stats-chart .tick { fill: var(--ink-soft); font: 11px system-ui, sans-serif; }
.stats-chart .line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stats-chart .area { fill: var(--chart-line); opacity: .1; }
.stats-chart .dot { fill: var(--chart-line); stroke: var(--paper); stroke-width: 2; }
.stats-chart .end-label { fill: var(--ink); font: 700 12px system-ui, sans-serif; }
.stats-chart .cross { stroke: var(--ink-soft); stroke-width: 1; }
.stats-tip {
  position: absolute; pointer-events: none; padding: 6px 9px; border-radius: 6px; min-width: 90px;
  background: var(--ink); color: var(--paper); font: 12px/1.35 system-ui, sans-serif;
}

.stats-locked { margin: 28px 0; padding: 18px 20px; border-radius: 10px; background: rgba(255,248,225,.85); border: 1px solid var(--paper-edge); border-left: 4px solid #E3B23C; }
.stats-locked h2 { margin: 0 0 6px; font-family: 'Shippori Mincho', serif; }
.stats .premium-btn { display: inline-block; padding: 9px 16px; border-radius: 6px; background: var(--seal); color: #fff; font: 700 .95rem system-ui, sans-serif; text-decoration: none; }

@media (max-width: 640px) {
  .stats-table th:nth-child(4), .stats-table td:nth-child(4) { display: none; }
}
.stats-social { color: var(--ink-soft); margin: 4px 0 0; } .stats-social button { margin-left: 8px; }