/* The curve of the last games (x-stats.recent, lot rfal), on the page of a game and its result: tokens of the charter and of
   the curve only (--ns-chart-*, ds/tokens.css, each with the nearest token of neurostim.css while that file is missing),
   drawn on --ns-page (--ns-chart-surface). Every value is placed by the server
   in percents (--x, --y); the hover and the keyboard focus of a point are CSS, the page needs no script for them. */
.stc { position: relative; container-type: inline-size; margin: 12px 0; padding: 10px 0 var(--ns-space-2); border-top: 1px solid var(--ns-chart-grid, var(--ns-border)); border-bottom: 1px solid var(--ns-chart-grid, var(--ns-border)); background: var(--ns-chart-surface, var(--ns-page)); color: var(--ns-text); transition: opacity .15s; }
.stc-busy { opacity: .55; }
/* The head: the title, the chips, the link to the history; on a phone the chips take a line of their own. */
.stc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ns-space-2) var(--ns-space-4); }
.stc-head > * { min-width: 0; }
.stc-head .stc-title { grid-column: 1; grid-row: 1; }
.stc-head .stc-pills { grid-column: 2; grid-row: 1; }
.stc-more { grid-column: 3; grid-row: 1; justify-self: end; font-size: var(--ns-size-sm); white-space: nowrap; }
.stc-more::after { content: " →"; }
.stc .stc-title { margin: 0; padding: 0; border: 0; font-size: var(--ns-size-md); color: var(--ns-text-strong); }
.stc-series { margin-left: .35em; font-weight: 600; color: var(--ns-muted); }
/* The chips on one line, scrolled within when they are many (a phone): the block keeps its height. */
.stc-pills { display: flex; gap: var(--ns-space-1); max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px 1px; margin: -4px -1px; }
.stc-pills::-webkit-scrollbar { display: none; }
.stc-pills a { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--ns-space-3); font-size: var(--ns-size-sm); white-space: nowrap; color: var(--ns-text); text-decoration: none; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-pill); }
.stc-pills a:hover { border-color: var(--ns-border-strong); }
.stc-pills a[aria-current] { color: var(--ns-on-ink); background: var(--ns-ink); border-color: var(--ns-ink); }
/* Under a finger the target is 44 px (CHARTE §3), the chip keeps its look. */
@media (pointer: coarse) { .stc-pills a { min-height: 2.25rem; } .stc-pills a::before { content: ""; position: absolute; inset: -4px 0; } }

.stc-note, .stc-aside { margin: var(--ns-space-2) 0 0; }
.stc-note { color: var(--ns-text-strong); }
.stc-aside { font-size: var(--ns-size-sm); color: var(--ns-muted); }
.stc-badge::before { content: ""; display: inline-block; margin-right: .45em; vertical-align: .05em; width: .7em; height: .7em; border-radius: 50%; background: var(--ns-chart-record, var(--ns-warn)); box-shadow: 0 0 0 2px var(--ns-chart-surface, var(--ns-page)), 0 0 0 3px var(--ns-chart-record, var(--ns-warn)); }

/* The figures on one line, the curve under them on the whole width: what the curve says, read in two seconds. */
.stc-body { display: grid; gap: var(--ns-space-2); margin-top: var(--ns-space-2); }
.stc-figs { display: flex; flex-wrap: wrap; gap: var(--ns-space-1) var(--ns-space-6); margin: 0; }
.stc-figs dt { display: flex; align-items: center; gap: .4em; font-size: var(--ns-size-xs); color: var(--ns-muted); }
.stc-narrow { display: none; }
.stc-figs dd { margin: 0; font-size: var(--ns-size-md); font-weight: 700; line-height: 1.2; color: var(--ns-text-strong); }
.stc-figs > div { display: block; }
.stc-figs dd.st-gain { color: var(--ns-ok); }
.stc-figs dd.st-loss { color: var(--ns-error); }
.stc-sub { margin-left: .4em; font-size: var(--ns-size-xs); font-weight: 400; color: var(--ns-muted); }
.stc-sub-inline { font-size: var(--ns-size-xs); color: var(--ns-muted); }
.stc-key { flex: none; width: .9rem; border-top: 2px solid; }
.stc-key-last { width: .55rem; height: .55rem; border: 0; border-radius: 50%; background: var(--ns-chart-current, var(--ns-accent-dark)); }
.stc-key-rec { border-color: var(--ns-chart-record, var(--ns-warn)); }
.stc-key-mean { border-top-width: 1px; border-color: var(--ns-chart-mean, var(--ns-muted)); }

/* The chart: the axis on the left (its two extreme games), the plot, the value of the last game on the right. */
.stc-chart { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 0 var(--ns-space-2); }
.stc-axis, .stc-endcol { position: relative; font-size: var(--ns-size-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stc-axis { text-align: right; color: var(--ns-muted); }
.stc-size { display: block; height: 0; overflow: hidden; visibility: hidden; }
.stc-endcol .stc-size { font-size: var(--ns-size-md); font-weight: 700; font-variant-numeric: normal; }
.stc-tick, .stc-end { position: absolute; top: calc(var(--y) * 1%); transform: translateY(-50%); }
.stc-tick { right: 0; }
.stc-end { left: 0; font-size: var(--ns-size-md); font-weight: 700; color: var(--ns-text-strong); font-variant-numeric: normal; }
.stc-plot { position: relative; height: 7.5rem; }
/* A result: the curve big, its values written on its lines (the record, the mean), « mieux » on its axis. */
.stc-result .stc-plot { height: 9rem; }
.stc-better { position: absolute; right: 0; top: -.2rem; font-size: var(--ns-size-xs); color: var(--ns-muted); }
.stc-tag { position: absolute; left: 0; top: calc(var(--y) * 1%); padding: 0 .3em; font-size: var(--ns-size-xs); line-height: 1.25; white-space: nowrap; background: var(--ns-chart-surface, var(--ns-page)); border-radius: var(--ns-radius-sm); transform: translateY(calc(-100% - 2px)); }
.stc-tag-rec { font-weight: 600; color: var(--ns-text-strong); }
/* The mean, and the record when a point would cover it on its line, in the right column at the height of their lines. */
.stc-end-tag { position: absolute; left: 0; top: calc(var(--y) * 1%); transform: translateY(-50%); font-size: var(--ns-size-xs); line-height: 1.2; color: var(--ns-muted); }
.stc-end-rec { font-weight: 600; color: var(--ns-text-strong); }
.stc-endcol .stc-size.stc-end-tag { position: static; transform: none; font-size: var(--ns-size-xs); font-weight: 400; }
.stc-endcol .stc-size.stc-end-rec { font-weight: 600; }
.stc-chart .stc-only-narrow { display: none; }
.stc-axis .stc-better-size { font-size: var(--ns-size-xs); font-weight: 400; }
.stc-end-sub { display: block; font-size: var(--ns-size-xs); font-weight: 400; color: var(--ns-muted); }
.stc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stc-grid, .stc-mean, .stc-rec { stroke-width: 1; vector-effect: non-scaling-stroke; }
.stc-grid { stroke: var(--ns-chart-grid, var(--ns-border)); }
.stc-mean { stroke: var(--ns-chart-mean, var(--ns-muted)); stroke-opacity: .7; }
.stc-rec { stroke: var(--ns-chart-record, var(--ns-warn)); stroke-width: 1.5; }
.stc-line { fill: none; stroke: var(--ns-chart-line, var(--ns-accent)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* A point: the band of its step is its target (the crosshair finds the game), the dot is its mark. */
.stc-pts { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }
.stc-pt { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 10%; margin: 0; transform: translateX(-50%); outline: none; }
.stc-pt::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--ns-chart-grid, var(--ns-border)); opacity: 0; }
.stc-dot { position: absolute; left: 50%; top: calc(var(--y) * 1%); width: 10px; height: 10px; border-radius: 50%; background: var(--ns-chart-dot, var(--ns-accent)); box-shadow: 0 0 0 2px var(--ns-chart-surface, var(--ns-page)); transform: translate(-50%, -50%); transition: transform .12s; }
.stc-pt-rec .stc-dot { background: var(--ns-chart-record, var(--ns-warn)); }
.stc-pt-last .stc-dot { width: 14px; height: 14px; background: var(--ns-chart-current, var(--ns-accent-dark)); }
.stc-pt-last.stc-pt-rec .stc-dot { box-shadow: 0 0 0 2px var(--ns-chart-surface, var(--ns-page)), 0 0 0 4px var(--ns-chart-record, var(--ns-warn)); }
.stc-pt-temp .stc-dot { background: var(--ns-chart-surface, var(--ns-page)); box-shadow: inset 0 0 0 2px var(--ns-chart-current, var(--ns-accent-dark)), 0 0 0 2px var(--ns-chart-surface, var(--ns-page)); }
.stc-pt:hover::before, .stc-pt:focus-visible::before { opacity: 1; }
.stc-pt:hover .stc-dot, .stc-pt:focus-visible .stc-dot { transform: translate(-50%, -50%) scale(1.3); }
.stc-pt:focus-visible .stc-dot { outline: 3px solid var(--ns-focus); outline-offset: 3px; }
.stc-tip { --tx: -50%; --ty: calc(-100% - 12px); position: absolute; left: 50%; top: calc(var(--y) * 1%); z-index: 2; display: none; padding: var(--ns-space-1) var(--ns-space-2); font-size: var(--ns-size-xs); line-height: 1.3; white-space: nowrap; color: var(--ns-on-ink); background: var(--ns-ink); border-radius: var(--ns-radius-sm); transform: translate(var(--tx), var(--ty)); pointer-events: none; }
.stc-tip strong { color: var(--ns-on-ink); }
.stc-pt-below .stc-tip { --ty: 12px; }
.stc-pt-start .stc-tip { --tx: -12px; }
.stc-pt-end .stc-tip { --tx: calc(-100% + 12px); }
.stc-pt:hover .stc-tip, .stc-pt:focus-visible .stc-tip { display: block; }

/* A new personal best: the last point rings, three times, never for who asked for less motion. */
.stc-new .stc-pt-last .stc-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ns-chart-record, var(--ns-warn)); animation: stc-ring 1.2s ease-out 3; opacity: 0; }
@keyframes stc-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stc-new .stc-pt-last .stc-dot::after { animation: none; } .stc-dot { transition: none; } }

/* No game yet: the silhouette of a curve, and what makes it appear. */
.stc-empty { margin-top: var(--ns-space-2); }
.stc-ghost-plot { position: relative; height: 3.5rem; }
/* The silhouette: a curve and its points in a neutral tone (without the token of the curve: halfway from the strong
   border to the page), the words on it. */
.stc-empty { --stc-ghost: var(--ns-chart-empty, color-mix(in srgb, var(--ns-border-strong) 45%, var(--ns-page))); }
.stc-ghost { fill: none; stroke: var(--stc-ghost); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stc-ghost-dots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.stc-ghost-dots li { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 8px; height: 8px; border-radius: 50%; background: var(--stc-ghost); box-shadow: 0 0 0 2px var(--ns-chart-surface, var(--ns-page)); transform: translate(-50%, -50%); }


@container (max-width: 34rem) {
    .stc-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: var(--ns-space-1) var(--ns-space-3); }
    .stc-figs .stc-fig-last { display: none; }
    .stc-sub { display: none; }
    .stc-sub-keep { display: block; margin: 0; }
    .stc-plot { height: 5.25rem; }
    .stc-result .stc-plot { height: 8rem; }
    .stc-head { grid-template-columns: minmax(0, 1fr) auto; }
    .stc-head .stc-pills { grid-column: 1 / -1; grid-row: 2; }
    .stc-more { grid-column: 2; grid-row: 1; }
    .stc-wide { display: none; }
    .stc-narrow { display: inline; }
    .stc-end, .stc-endcol .stc-size { font-size: var(--ns-size-sm); }
    .stc-chart .stc-only-narrow { display: block; }
    .stc-chart .stc-only-wide { display: none; }
    /* The columns as tight as their words allow, on two lines, nothing cut: the width goes to the plot. */
    .stc-chart { column-gap: var(--ns-space-1); }
    .stc-result .stc-chart { margin-top: .75rem; }
    .stc-end-sub, .stc-end-tag, .stc-better, .stc-axis .stc-better-size, .stc-endcol .stc-size.stc-end-sub, .stc-endcol .stc-size.stc-end-tag { width: min-content; white-space: normal; }
    .stc-better { top: -1.15rem; line-height: 1.1; }
}

/* Replay at hand on a phone, on a result: a bar at the bottom of the screen (fixed: the content of the page scrolls on
   its own, a sticky block would never stick), the page given the room under its last line so that it hides nothing; its
   buttons and shortcuts unchanged. A result view sets the class on the block of its Replay button. */
@media (max-width: 40rem) {
    .stc-replay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-2); margin: 0; padding: var(--ns-space-2) var(--ns-space-4) calc(var(--ns-space-2) + env(safe-area-inset-bottom)); background: var(--ns-page); box-shadow: 0 -1px 0 var(--ns-border); }
    .stc-replay > .button-primary, .stc-replay > button[type="submit"], .stc-replay > form { flex: 1 1 auto; }
    .stc-replay > form .button-primary { width: 100%; }
    body:has(.stc-replay) { padding-bottom: 8rem; }
}

/* A player who has a curve knows the game: the lead of its page right before the curve, and the lead of the Speedrun
   panel right after it, give their place to it (the text stays in the page; a visitor without a game, a crawler, sees
   it); the heading after it comes closer. Play stays in the first screen. */
.lead:has(+ .stc-played), .stc-lead:has(+ .stc-played), .stc-played ~ .stc-lead-after, .stc-played ~ #speedrun > h2 + p { display: none; }
.stc + h2, .stc + section > h2:first-child { margin-top: var(--ns-space-4); }

/* The brief history of a game without a curve (stats.partials.recent-history): two columns of five, one on a phone, the
   height of a curve; the outcome is said in words, the dot only repeats it. */
.stc-hist { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-auto-columns: minmax(0, 1fr); gap: var(--ns-space-1) var(--ns-space-5); margin: var(--ns-space-2) 0 0; padding: 0; list-style: none; font-size: var(--ns-size-sm); }
.stc-hist li { display: flex; align-items: baseline; gap: .5em; min-width: 0; }
.stc-hist-issue { font-weight: 600; color: var(--ns-text-strong); white-space: nowrap; }
.stc-hist-sub { font-size: var(--ns-size-xs); color: var(--ns-muted); white-space: nowrap; }
.stc-hist-at { margin-left: auto; }
.stc-hist-dot { flex: none; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ns-chart-grid, var(--ns-border)); }
.stc-hist-win { background: var(--ns-ok); }
.stc-hist-loss { background: var(--ns-error); }
.stc-hist-now .stc-hist-dot { box-shadow: 0 0 0 2px var(--ns-chart-current, var(--ns-accent-dark)); }
.stc-hist-ghost, .stc-hist-strip { display: flex; gap: var(--ns-space-3); margin: var(--ns-space-3) 0 var(--ns-space-1); }
.stc-hist-strip { display: none; }
@container (max-width: 34rem) {
    .stc-hist { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .stc-hist li:nth-child(n + 6) { display: none; }
    .stc-hist-strip { display: flex; }
    .stc-hist-words { display: block; margin-left: 0; }
}