/* Truesight (domain Truesight): the cards of the home page, the example, the board of the figure, the point placed, the
   answer drawn over it and the figures of the result. Prefixed classes, colours from the tokens of neurostim.css only. */
.ts-sub { font-size: var(--ns-size-lg, 1.125rem); font-weight: 400; }
.ts-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4, 1rem); margin: 0 0 var(--ns-space-5, 1.5rem); }
.ts-card { display: flex; flex-direction: column; gap: var(--ns-space-2, .5rem); }
.ts-card h2 { margin: 0; }
.ts-card p, .ts-card form { margin: 0; }
.ts-score { font-size: var(--ns-size-2xl, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong, #2a2124); }
.ts-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5, 1.5rem); }
.ts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3, .75rem); margin: 0 0 var(--ns-space-4, 1rem); }
.ts-actions form { margin: 0; }
.ts > .ts-actions { justify-content: center; }
.ts-actions > a { display: inline-flex; align-items: center; min-height: var(--ns-target, 44px); }
.ts-rules { margin-top: var(--ns-space-6, 2rem); }

/* The example of the home page: a point slides to the middle, the answer shows with the gap. */
.ts-demo { max-width: 30rem; margin: 0 auto var(--ns-space-5, 1.5rem); text-align: center; }
.ts-demo-svg { display: block; width: 100%; height: auto; background: var(--ns-tint, #faf7f9); border: 2px solid var(--ns-border-strong, #b9adb3); border-radius: var(--ns-radius, 8px); }
.ts-demo figcaption { margin-top: var(--ns-space-2, .5rem); font-size: var(--ns-size-sm, .875rem); }
.ts-demo-seg { stroke: var(--ns-ink, #2a2124); stroke-width: 6; stroke-linecap: round; }
.ts-demo-end { fill: var(--ns-ink, #2a2124); }
.ts-demo-pt circle { fill: var(--ns-accent-dark, #cc0066); }
.ts-demo-ring { fill: none; stroke: var(--ns-ok, #2e7d32); stroke-width: 6; }
.ts-demo-gap { stroke: var(--ns-accent-dark, #cc0066); stroke-width: 4; stroke-dasharray: 8 6; }
.ts-demo-txt { fill: var(--ns-ok, #2e7d32); font-size: 54px; font-weight: 700; }
.ts-demo-pt { animation: ts-demo-move 6s ease-in-out infinite; }
.ts-demo-ans { opacity: 0; animation: ts-demo-ans 6s ease-out infinite; }
@keyframes ts-demo-move {
    0% { transform: translate(-230px, 150px); opacity: 0; }
    8% { transform: translate(-230px, 150px); opacity: 1; }
    40%, 92% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes ts-demo-ans { 0%, 50% { opacity: 0; } 58%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ts-demo-pt, .ts-demo-ans { animation: none; opacity: 1; }
}

/* The game. */
.ts-status { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ns-space-2, .5rem) var(--ns-space-5, 1.5rem); margin: 0 0 var(--ns-space-2, .5rem); font-variant-numeric: tabular-nums; }
.ts-status output { font-weight: 700; color: var(--ns-text-strong, #2a2124); }
.ts-game { width: min(100%, 34rem); margin: 0 auto var(--ns-space-4, 1rem); text-align: center; }
.ts-ask { min-height: 2.6em; margin: 0 0 var(--ns-space-2, .5rem); font-size: var(--ns-size-lg, 1.125rem); font-weight: 700; color: var(--ns-text-strong, #2a2124); display: flex; align-items: center; justify-content: center; }
/* Board, task, verdict and button stay on a laptop screen: the board gives way to the height of the window. */
.ts-board { display: block; width: min(100%, max(18rem, 100vh - 17rem)); aspect-ratio: 1; margin: 0 auto var(--ns-space-2, .5rem); background: var(--ns-page, #fff); border: 2px solid var(--ns-border-strong, #b9adb3); border-radius: var(--ns-radius, 8px); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.ts-board:focus { outline: none; }
.ts-board:focus-visible { outline: 3px solid var(--ns-focus, #cc0066); outline-offset: 2px; }
.ts-board line, .ts-board path { stroke-linecap: round; }
.ts-fig .ts-l { stroke: var(--ns-ink, #2a2124); stroke-width: 5; }
.ts-fig .ts-c { fill: none; stroke: var(--ns-ink, #2a2124); stroke-width: 5; }
.ts-fig .ts-p { fill: var(--ns-ink, #2a2124); }
.ts-t { fill: var(--ns-ink, #2a2124); font-size: 46px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.ts-ans .ts-l, .ts-ans .ts-m, .ts-ans .ts-o { fill: none; stroke: var(--ns-ok, #2e7d32); stroke-width: 4; }
.ts-ans .ts-m, .ts-ans .ts-o { stroke-dasharray: 14 10; }
.ts-ans .ts-p { fill: var(--ns-page, #fff); stroke: var(--ns-ok, #2e7d32); stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: ts-pop .45s ease-out; }
.ts-ans > * { animation: ts-in .35s ease-out; }
.ts-gap { stroke: var(--ns-accent-dark, #cc0066); stroke-width: 4; stroke-dasharray: 6 6; }
.ts-guide { stroke: var(--ns-accent-dark, #cc0066); stroke-width: 3; opacity: .7; }
.ts-cross { stroke: var(--ns-accent-dark, #cc0066); stroke-width: 2; opacity: .55; }
.ts-pt { fill: var(--ns-accent-dark, #cc0066); stroke: var(--ns-page, #fff); stroke-width: 3; }
@keyframes ts-pop { from { transform: scale(2.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ts-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ts-ans > *, .ts-ans .ts-p { animation: none; }
}
.ts-say { min-height: 3.5rem; margin: 0 0 var(--ns-space-2, .5rem); font-size: var(--ns-size-md, 1rem); display: flex; align-items: center; justify-content: center; }
.ts-say.ts-q0, .ts-say.ts-q1, .ts-say.ts-q2, .ts-say.ts-q3 { font-size: var(--ns-size-lg, 1.125rem); font-weight: 700; }
.ts-q0, .ts-q1 { color: var(--ns-ok, #2e7d32); }
.ts-q2 { color: var(--ns-warn, #9a5800); }
.ts-q3 { color: var(--ns-error, #c62828); }
.ts-go { margin: 0; }
.ts-go button { min-width: 10rem; min-height: var(--ns-target, 44px); }

/* The result: the figures one by one, a bar for the gap (full at 10 %). */
.ts-figures { list-style: none; margin: 0 0 var(--ns-space-5, 1.5rem); padding: 0; display: grid; gap: var(--ns-space-1, .25rem); max-width: 34rem; }
.ts-figures li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(2.5rem, 1fr) 7.5rem; align-items: center; gap: var(--ns-space-3, .75rem); font-variant-numeric: tabular-nums; }
.ts-fname { color: var(--ns-text, #2a2124); overflow-wrap: anywhere; }
.ts-fgap { text-align: right; font-weight: 700; }
.ts-bar { display: block; height: .6rem; background: var(--ns-tint, #faf7f9); border: 1px solid var(--ns-border, #ddd3d8); border-radius: var(--ns-radius-pill, 999px); overflow: hidden; }
.ts-bar span { display: block; height: 100%; background: currentColor; border-radius: inherit; }
@media (max-width: 30rem) {
    .ts-figures li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--ns-space-3, .75rem); }
    .ts-figures .ts-bar { grid-column: 1 / -1; grid-row: 2; margin-bottom: var(--ns-space-1, .25rem); }
}