/* #train — your make % on the shot in front of you: drag balls on a felt table, read your odds + the distance × angle heatmap. */
#train .tr-head { max-width: 50rem; margin-bottom: var(--s5); }
#train .tr-head .display { font-size: clamp(2.4rem, 7vw, 5.5rem); margin-top: var(--s3); }
#train .tr-hl { color: var(--accent-ink); }
#train .tr-lede { color: var(--muted); font-size: 1.15rem; margin: var(--s4) 0 0; max-width: 44ch; }

#train .tr-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }

/* table */
#train .tr-table { margin: 0; }
#train .tr-table svg { width: 100%; height: auto; border-radius: 22px; touch-action: none; user-select: none; box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px color-mix(in srgb, var(--felt) 50%, transparent); }
#train .tr-table figcaption { margin-top: var(--s2); color: var(--muted); font: 600 .75rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
#train .t-rail { fill: var(--rail); }
#train .t-felt { fill: var(--felt); }
#train .t-diamond { fill: var(--ball); opacity: .7; }
#train .t-pocket { fill: var(--rail); cursor: pointer; }
#train .t-pocket.is-target { stroke: var(--accent); stroke-width: 1.6; }
#train .t-aim { fill: none; stroke: var(--ball); stroke-width: .9; stroke-dasharray: 2 2.2; stroke-linecap: round; }
#train .t-line { fill: none; stroke: var(--on-felt); stroke-opacity: .55; stroke-width: .9; }
#train .t-ghost { fill: none; stroke: var(--ball); stroke-width: .7; stroke-dasharray: 1.2 1.2; }
#train .t-ball { cursor: grab; outline: none; }
#train .t-ball:active { cursor: grabbing; }
#train .t-ball circle { fill: var(--rail); }
#train .t-ball.cue circle { fill: var(--ball); }
#train .t-ball .disc { fill: var(--ball); }
#train .t-ball text { fill: var(--rail); font: 800 2.6px/1 var(--font-mono); text-anchor: middle; pointer-events: none; }
#train .t-ball .halo { fill: none; stroke: var(--ball); stroke-width: .8; opacity: 0; transition: opacity .2s; }
#train .t-ball:hover .halo, #train .t-ball:focus-visible .halo { opacity: .9; }
#train .t-ball:focus-visible .halo { stroke: var(--accent); }

/* readout: the one orange number */
#train .tr-card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); }
#train .tr-k { margin: 0; font: 600 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#train .tr-pct { display: block; margin: var(--s2) 0 0; font: 900 clamp(4rem, 9vw, 6.5rem)/.9 var(--font-display); font-stretch: 125%; font-variation-settings: "wdth" 125; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
#train .tr-pct.is-none { color: var(--muted); }
#train .tr-meta { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
#train .tr-meta span { padding: .35em .7em; border-radius: 999px; background: var(--surface-2); font: 600 .78rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
#train .tr-say { margin: var(--s3) 0 0; color: var(--muted); }

/* heatmap: felt-blue ramp, active cell outlined orange */
#train .tr-heat { margin-top: var(--s4); display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 3px; font: 600 .7rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
#train .tr-heat .ax { color: var(--muted); display: grid; place-items: center; padding: .35rem .2rem; text-align: center; }
#train .tr-heat .ax.row { place-items: center end; padding-right: .5rem; }
#train .tr-heat .cell {
  display: grid; place-items: center; aspect-ratio: 1.6; border-radius: 6px;
  background: color-mix(in srgb, var(--felt) calc(var(--v) * 1%), var(--surface-2));
  color: var(--fg); outline: 2px solid transparent; outline-offset: -2px;
  transition: outline-color .2s, transform .25s var(--ease-spring);
}
#train .tr-heat .cell.hi { color: var(--on-felt); }
#train .tr-heat .cell.is-now { outline-color: var(--accent); transform: scale(1.08); z-index: 1; }
#train .tr-heat-cap { margin: var(--s2) 0 0; color: var(--muted); font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* drill */
#train .tr-drill { margin-top: var(--s3); display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--radius); border: 2px dashed var(--line); }
#train .tr-drill svg { width: 40px; height: 40px; fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; }
#train .tr-drill p { margin: 0; font-size: .95rem; line-height: 1.4; }
#train .tr-drill b { color: var(--fg); }
#train .tr-note { margin: var(--s4) 0 0; color: var(--muted); font-size: .85rem; }

@media (max-width: 900px) {
  #train .tr-grid { grid-template-columns: minmax(0, 1fr); }
}