/* Backtrack (domain Backtrack, chantier « 10 jeux neufs »): the home (the example of a 2-back, the card of a size), the
   grid of the game and its button, the sequence replayed on the result. Prefixed classes, the colours of the frame from
   the tokens of neurostim.css; the grid is the game itself, a dark stage where the lit cell stands out in both themes. */
.bt { --bt-stage: #1f2328; --bt-cell: #343a42; --bt-lit: #ff4fa7; }
.bt-sub { font-size: var(--ns-size-md, 1rem); font-weight: 400; }

.bt-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--ns-space-4, 1rem) var(--ns-space-5, 1.5rem); align-items: start; margin: 0 0 var(--ns-space-5, 1.5rem); }
.bt-card { display: flex; flex-direction: column; gap: var(--ns-space-2, 0.5rem); margin: 0; }
.bt-card h2 { margin: var(--ns-space-2, 0.5rem) 0 0; font-size: var(--ns-size-lg, 1.125rem); }
.bt-card p, .bt-card form { margin: 0; }
.bt-card .tabs { margin: 0; }
.bt-n { color: var(--ns-muted, #5d6867); }
.bt-points { font-size: var(--ns-size-2xl, 1.75rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong, #2a2124); }
.bt-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5, 1.5rem); }
.bt-rules { margin-top: var(--ns-space-6, 2rem); }

/* The example: six steps in a loop of 12 s, 2 s each, a cell lit 0,8 s; one caption at a time. */
.bt-demo { display: flex; flex-wrap: wrap; gap: var(--ns-space-4, 1rem); align-items: center; margin: 0; padding: var(--ns-space-4, 1rem); background: var(--ns-info-soft, #eef4f3); border: 1px solid var(--ns-info-line, #cfdad9); border-radius: var(--ns-radius-lg, 14px); }
.bt-demo-play { display: grid; gap: var(--ns-space-2, 0.5rem); justify-items: center; }
.bt-demo-grid { display: grid; grid-template: repeat(3, 1.9rem) / repeat(3, 1.9rem); gap: 0.3rem; padding: 0.4rem; background: var(--bt-stage); border-radius: var(--ns-radius, 10px); }
.bt-demo-cell { background: var(--bt-cell); border-radius: 4px; }
.bt-demo-lit { background: var(--bt-lit); border-radius: 4px; box-shadow: 0 0 0.6rem var(--bt-lit); opacity: 0; animation: bt-lit 12s linear infinite; animation-delay: calc(var(--bt-step) * 2s - 12s); }
.bt-demo-same { position: relative; isolation: isolate; padding: 0.3rem 0.9rem; font-weight: 700; color: #fff; background: var(--ns-accent-dark, #cc0066); border-radius: var(--ns-radius-sm, 6px); overflow: hidden; }
.bt-demo-press { position: absolute; inset: 0; z-index: -1; background: var(--ns-ok, #2e7d32); opacity: 0; animation: bt-lit 12s linear infinite; animation-delay: calc(var(--bt-step) * 2s - 12s); }
.bt-demo figcaption { flex: 1 1 12rem; min-width: 0; }
.bt-demo-steps { display: grid; margin: var(--ns-space-2, 0.5rem) 0 0; padding: 0; list-style: none; }
.bt-demo-steps li { grid-area: 1 / 1; opacity: 0; animation: bt-cap 12s linear infinite; animation-delay: calc(var(--bt-step) * 2s - 12s); }
@keyframes bt-lit { 0%, 6.6% { opacity: 1; } 6.7%, 100% { opacity: 0; } }
@keyframes bt-cap { 0%, 16.6% { opacity: 1; } 16.7%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .bt-demo-play { display: none; }
    .bt-demo-steps { display: block; padding-left: 1.2em; list-style: decimal; }
    .bt-demo-steps li { opacity: 1; animation: none; }
}

/* The game. */
.bt-game { max-width: 22rem; margin: 0 auto var(--ns-space-4, 1rem); text-align: center; }
.bt-game:focus { outline: none; }
.bt-rule { margin: 0 0 var(--ns-space-2, 0.5rem); font-weight: 600; }
.bt-status { margin: 0 0 var(--ns-space-3, 0.75rem); color: var(--ns-muted, #5d6867); font-variant-numeric: tabular-nums; }
.bt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; width: min(100%, 18rem); aspect-ratio: 1; margin: 0 auto; padding: 0.6rem; background: var(--bt-stage); border-radius: var(--ns-radius-lg, 14px); touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.bt-cell { background: var(--bt-cell); border-radius: var(--ns-radius-sm, 6px); transition: background-color 0.06s; }
.bt-cell.on { background: var(--bt-lit); box-shadow: 0 0 1.2rem var(--bt-lit); }
.bt-game.bt-hit .bt-grid { animation: bt-ok 0.5s ease-out; }
.bt-game.bt-fa .bt-grid { animation: bt-ko 0.5s ease-out; }
@keyframes bt-ok { from { box-shadow: 0 0 0 6px var(--ns-ok, #2e7d32); } to { box-shadow: 0 0 0 0 transparent; } }
@keyframes bt-ko { from { box-shadow: 0 0 0 6px var(--ns-error, #c62828); } to { box-shadow: 0 0 0 0 transparent; } }
.bt-feedback { min-height: 1.5em; margin: var(--ns-space-2, 0.5rem) 0 0; font-weight: 700; }
.bt-feedback.bt-hit { color: var(--ns-ok, #2e7d32); }
.bt-feedback.bt-fa { color: var(--ns-error, #c62828); }
.bt-feedback.bt-miss { color: var(--ns-warn, #9a5800); }
.bt-form { margin: 0; }
.bt-same { display: block; width: min(100%, 18rem); min-height: 3.5rem; margin: var(--ns-space-2, 0.5rem) auto 0; font-size: var(--ns-size-lg, 1.125rem); touch-action: manipulation; }
.bt-tally { margin: var(--ns-space-2, 0.5rem) 0 0; color: var(--ns-muted, #5d6867); font-variant-numeric: tabular-nums; }
.bt-tally-hit { color: var(--ns-ok, #2e7d32); margin-right: var(--ns-space-3, 0.75rem); }
.bt-tally-fa { color: var(--ns-error, #c62828); }
.bt-game:not(.bt-js) .bt-tally { display: none; }
.bt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3, 0.75rem); justify-content: center; margin: 0 0 var(--ns-space-3, 0.75rem); }
.bt-actions > a { display: inline-flex; align-items: center; min-height: var(--ns-target, 44px); }

/* The result: the sequence again, each cell in its mini grid, its mark. */
.bt-summary { margin: var(--ns-space-2, 0.5rem) 0; }
.bt-replay { margin: 0 0 var(--ns-space-5, 1.5rem); }
.bt-legend { margin: 0 0 var(--ns-space-3, 0.75rem); }
.bt-trail { display: flex; flex-wrap: wrap; gap: var(--ns-space-2, 0.5rem); margin: 0; padding: 0; list-style: none; }
.bt-step { position: relative; display: grid; justify-items: center; gap: 2px; padding: 3px; border: 2px solid transparent; border-radius: var(--ns-radius-sm, 6px); }
.bt-step-hit { border-color: var(--ns-ok, #2e7d32); }
.bt-step-fa { border-color: var(--ns-error, #c62828); }
.bt-step-miss { border-color: var(--ns-warn, #9a5800); border-style: dashed; }
.bt-mini { display: grid; grid-template-columns: repeat(3, 0.55rem); gap: 2px; padding: 3px; background: var(--bt-stage); border-radius: 4px; }
.bt-mini i { width: 0.55rem; height: 0.55rem; background: var(--bt-cell); border-radius: 2px; }
.bt-mini i.on { background: var(--bt-lit); }
.bt-step-n { font-size: var(--ns-size-xs, 0.8125rem); color: var(--ns-muted, #5d6867); font-variant-numeric: tabular-nums; }
.bt-mark { font-weight: 800; }
.bt-step .bt-mark { position: absolute; top: -0.55rem; right: -0.45rem; min-width: 1.1rem; font-size: 0.75rem; line-height: 1.1rem; text-align: center; color: #fff; border-radius: 50%; }
.bt-mark-hit { color: var(--ns-ok, #2e7d32); }
.bt-mark-fa { color: var(--ns-error, #c62828); }
.bt-mark-miss { color: var(--ns-warn, #9a5800); }
.bt-step .bt-mark-hit { background: var(--ns-ok, #2e7d32); }
.bt-step .bt-mark-fa { background: var(--ns-error, #c62828); }
.bt-step .bt-mark-miss { background: var(--ns-warn, #9a5800); }