/* Slidetile (the sliding puzzle against the clock): the size tabs, the cards, the board and its tiles that slide. Prefixed
   classes, colours from the tokens of neurostim.css only. A tile is a cell wide and placed by its row and column classes
   (a translation of its own size): no inline style, the script only changes the classes. */
.st-sub { font-size: var(--ns-size-lg); font-weight: 400; }
.st-intro { display: flex; align-items: center; gap: var(--ns-space-4); margin: 0 0 var(--ns-space-3); }
.st-intro .lead { margin: 0; flex: 1; }
.st-demo { flex: 0 0 auto; width: 6.5rem; }
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--ns-space-4); margin: 0 0 var(--ns-space-5); }
.st-card { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.st-card h2 { margin: 0; }
.st-card p, .st-card form { margin: 0; }
.st-time { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); margin: 0; }
.st-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 var(--ns-space-5); }
.st-rules { margin-top: var(--ns-space-6); }
.st-result form { margin: var(--ns-space-3) 0 0; }

.st-status { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ns-space-2) var(--ns-space-5); margin: 0 0 var(--ns-space-1); font-variant-numeric: tabular-nums; }
.st-status output { font-weight: 700; font-size: var(--ns-size-xl); color: var(--ns-text-strong); }
.st-hint { text-align: center; margin: 0 0 var(--ns-space-3); font-size: var(--ns-size-sm); }
.st:has(.st-running) .st-hint { visibility: hidden; }

.st-board { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin: 0 auto var(--ns-space-4); background: var(--ns-tint, #eef0f4); border: 3px solid var(--ns-tint, #eef0f4); border-radius: var(--ns-radius, 8px); touch-action: none; user-select: none; -webkit-user-select: none; box-sizing: border-box; }
.st-board:focus-visible { outline: 3px solid var(--ns-focus); outline-offset: 2px; }
.st-n3 { --n: 3; }
.st-n4 { --n: 4; }
.st-n5 { --n: 5; }
.st-r0 { --r: 0; } .st-r1 { --r: 1; } .st-r2 { --r: 2; } .st-r3 { --r: 3; } .st-r4 { --r: 4; }
.st-c0 { --c: 0; } .st-c1 { --c: 1; } .st-c2 { --c: 2; } .st-c3 { --c: 3; } .st-c4 { --c: 4; }
.st-tile { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: calc(100% / var(--n)); height: calc(100% / var(--n)); margin: 0; padding: 0; transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)); transition: transform 70ms ease-out; border: 3px solid transparent; background-clip: padding-box; background-color: var(--ns-page, #fff); border-radius: calc(var(--ns-radius-sm, 4px) + 3px); box-shadow: inset 0 0 0 1px var(--ns-border-strong, #b8bec9); color: var(--ns-ink); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.st-n3 .st-tile { font-size: clamp(1.5rem, 9vw, 2.6rem); }
.st-n4 .st-tile { font-size: clamp(1.3rem, 7vw, 2rem); }
.st-n5 .st-tile { font-size: clamp(1.1rem, 5.5vw, 1.6rem); }
.st-board .st-ok { color: var(--ns-on-accent, #fff); background-color: var(--ns-accent-dark, #c2185b); box-shadow: none; }
.st-tile:focus-visible { outline: 3px solid var(--ns-focus); outline-offset: -3px; }
/* The site's hover of buttons would read as a tile in its place (and sticks after a tap): a thin ring, with a mouse only. */
.st-board .st-tile:hover { color: var(--ns-ink); background-color: var(--ns-page, #fff); border-color: transparent; }
.st-board .st-ok:hover { color: var(--ns-on-accent, #fff); background-color: var(--ns-accent-dark, #c2185b); }
@media (hover: hover) { .st-board .st-tile:hover { box-shadow: inset 0 0 0 2px var(--ns-accent, #ff3399); } }
.st-board .st-no { animation: st-no 0.3s ease-out; }
.st-done .st-board { opacity: 0.75; }
.st-done .st-tile { transition: none; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3); justify-content: center; }
@keyframes st-no { 0%, 100% { margin-left: 0; } 25% { margin-left: -4px; color: var(--ns-error); } 75% { margin-left: 4px; color: var(--ns-error); } }

/* The demo of the home page: the 5 slides left, then the 6 slides up, both light up, in a loop of 4 s. */
.st-demo .st-board { width: 100%; margin: 0; border-width: 2px; }
.st-demo .st-tile { font-size: 1.05rem; border-width: 2px; cursor: default; transition: none; }
.st-demo .st-demo-a { animation: st-demo-a 4s infinite; }
.st-demo .st-demo-b { animation: st-demo-b 4s infinite; }
@keyframes st-demo-a {
    0%, 25% { transform: translate(200%, 100%); }
    32%, 100% { transform: translate(100%, 100%); color: var(--ns-on-accent, #fff); background-color: var(--ns-accent-dark, #c2185b); box-shadow: none; }
}
@keyframes st-demo-b {
    0%, 50% { transform: translate(200%, 200%); }
    57%, 100% { transform: translate(200%, 100%); color: var(--ns-on-accent, #fff); background-color: var(--ns-accent-dark, #c2185b); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .st-tile { transition: none; }
    .st-board .st-no { animation-duration: 0.01s; }
    .st-demo .st-demo-a, .st-demo .st-demo-b { animation: none; }
}
/* A player who has a curve knows the cards: their sentence gives its place, Play stays on the first screen. */
.stc-played ~ .st-cards .st-card > h2 + .muted { display: none; }