/* ── Pistekehitys subpage ────────────────────────────────────────────── */

.hero--sub { padding-bottom: 8px; }
.hero-title--sub { font-size: clamp(44px, 8vw, 92px); }
.back-link {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--gold); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px;
  transition: all .2s;
}
.back-link:hover { background: rgba(227, 198, 130, .08); border-color: var(--gold-lo); }

.chart-panel { margin-top: clamp(20px, 4vw, 40px); }
.chart-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.seg { display: inline-flex; gap: 3px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: rgba(13, 20, 16, .7); }
.seg-btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text-dim); background: none; border: none; border-radius: 999px; padding: 7px 18px;
  transition: all .2s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { background: rgba(227, 198, 130, .14); color: var(--gold-hi); }
.ghost-btn {
  font-family: var(--font-mono); font-size: 12px; cursor: pointer; color: var(--gold);
  background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px;
  transition: all .2s;
}
.ghost-btn:hover { background: rgba(227, 198, 130, .08); border-color: var(--gold-lo); }
.ghost-btn:disabled { opacity: .5; cursor: default; }

.chart-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(87, 199, 133, .05), transparent 55%),
    linear-gradient(180deg, rgba(18, 27, 21, .55), rgba(10, 16, 12, .85));
  padding: 0;
  overflow: hidden;
  touch-action: pan-y;
}
.chart-stage svg { display: block; width: 100%; height: auto; }

/* axes & grid */
.grid-line { stroke: rgba(227, 198, 130, .07); stroke-width: 1; }
.axis-label { fill: var(--text-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
.axis-label.y { text-anchor: end; }
.axis-label.x { text-anchor: middle; }

/* lines */
.series-path {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .3s, stroke-width .2s;
}
.series-path.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s cubic-bezier(.4, .8, .3, 1) forwards; }
.series-path.draw.draw-slow { animation-duration: 2.7s; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.series-dot { transition: opacity .3s, r .2s; }
.series-end-label {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  transition: opacity .3s;
}
.label-link { fill: none; stroke-width: 1; transition: opacity .3s; }

/* dim state when a player is focused */
.chart-stage.has-focus .series-path:not(.is-focus) { opacity: .12 !important; }
.chart-stage.has-focus .series-dot:not(.is-focus) { opacity: .12 !important; }
.chart-stage.has-focus .series-end-label:not(.is-focus) { opacity: 0 !important; }
.chart-stage.has-focus .label-link:not(.is-focus) { opacity: 0 !important; }
.chart-stage.has-focus .label-link.is-focus { opacity: .5 !important; }
.series-path.is-focus { stroke-width: 3.4 !important; opacity: 1 !important; }
.chart-stage.has-focus .series-end-label.is-focus,
.chart-stage.has-focus .series-dot.is-focus { opacity: 1 !important; }

/* scrubber */
.scrub-line { stroke: rgba(227, 198, 130, .35); stroke-width: 1; stroke-dasharray: 3 4; }
.scrub-dot { stroke: var(--ink); stroke-width: 2; }

.chart-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(10, 16, 12, .94); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 9px 12px; min-width: 132px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); backdrop-filter: blur(8px);
  transform: translateX(-50%); transition: opacity .15s;
}
.chart-tooltip .tip-match { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: .05em; text-transform: uppercase; }
.chart-tooltip .tip-rows { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.chart-tooltip .tip-row { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.chart-tooltip .tip-sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chart-tooltip .tip-name { color: var(--text); font-weight: 600; }
.chart-tooltip .tip-val { margin-left: auto; font-family: var(--font-mono); color: var(--gold-hi); font-weight: 700; }

.chart-meta {
  margin-top: 12px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}

/* legend */
.legend-hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.hint-clear { font-family: var(--font-mono); font-size: 11px; color: var(--gold); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.hint-clear:hover { color: var(--gold-hi); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 8px;
  background: rgba(18, 27, 21, .5); transition: all .2s; user-select: none;
}
.legend-chip:hover { border-color: var(--line-strong); }
.legend-chip.is-focus { border-color: var(--gold-lo); background: rgba(227, 198, 130, .1); }
.legend-chip.dimmed { opacity: .4; }
.legend-chip .lc-rank { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); min-width: 16px; text-align: center; }
.legend-chip .lc-sw { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.legend-chip .lc-name { font-size: 13px; font-weight: 600; color: var(--text); }
.legend-chip .lc-pts { font-family: var(--font-mono); font-size: 12px; color: var(--gold-hi); font-weight: 700; }

.loading-state, .empty-state {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 13.5px;
}
.empty-state .big { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--text-dim); display: block; margin-bottom: 6px; }

@media (max-width: 640px) {
  .chart-toolbar { gap: 8px; }
  .seg-btn { padding: 7px 14px; }
  .chart-tooltip { min-width: 118px; }
}