/* Rotamind (domain Rotamind, chantier « 10 jeux neufs »): the home card, the example, the pair on its stage, the two big
   buttons, the dots of the twenty answers, the replay of a pair. Prefixed classes, the colours from the tokens of
   neurostim.css. */
.rm { --rm-fill: var(--ns-accent, #2f6fde); --rm-tile: var(--ns-tint, #f1f4f9); --rm-ghost: var(--ns-border-strong, #9aa4b2); }
.rm-sub { font-size: var(--ns-size-md); font-weight: 400; }
.rm-card { display: flex; flex-direction: column; gap: var(--ns-space-2); max-width: 30rem; margin: 0 0 var(--ns-space-5); }
.rm-card h2 { margin: var(--ns-space-2) 0 0; font-size: var(--ns-size-lg); }
.rm-card p, .rm-card form { margin: 0; }
.rm-time { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.rm-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5); }
.rm-rules { margin-top: var(--ns-space-6); }
.rm-clock { margin: 0 0 var(--ns-space-2); text-align: center; font-size: var(--ns-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.rm-progress { margin: 0 0 var(--ns-space-2); text-align: center; color: var(--ns-muted); }

/* The shapes: cells of one colour, a thin line of the tile between them. */
.rm-shape { display: block; width: 100%; height: auto; aspect-ratio: 1; padding: 6%; box-sizing: border-box; background: var(--rm-tile); border-radius: var(--ns-radius); }
.rm-shape polygon { fill: var(--rm-fill); stroke: var(--rm-tile); stroke-width: 0.07; stroke-linejoin: round; }
.rm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ns-space-3); align-items: center; }

/* The example and the replays: the right shape as an outline, the left one turning (and flipping) onto it. */
.rm-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-3) var(--ns-space-4); max-width: 36rem; margin: 0 0 var(--ns-space-5); }
.rm-demo .rm-duo { gap: var(--ns-space-2); }
.rm-replay { margin: 0; }
.rm-replay figcaption { margin-top: var(--ns-space-2); text-align: center; font-size: var(--ns-size-sm); line-height: 1.4; }
.rm-ghost polygon { fill: none; stroke: var(--rm-ghost); stroke-width: 0.08; stroke-dasharray: 0.18 0.12; }
.rm-anim { animation: rm-turn 4.5s ease-in-out infinite; }
.rm-anim polygon { fill-opacity: 0.85; }
@keyframes rm-turn {
    0%, 18% { transform: rotate(0deg) scaleX(1); }
    40% { transform: rotate(0deg) scaleX(var(--rm-f, 1)); }
    72%, 100% { transform: rotate(var(--rm-a, 0deg)) scaleX(var(--rm-f, 1)); }
}
@media (prefers-reduced-motion: reduce) {
    .rm-anim { animation: none; transform: rotate(var(--rm-a, 0deg)) scaleX(var(--rm-f, 1)); }
}
.rm-tag { display: inline-block; padding: 0.1em 0.6em; border-radius: var(--ns-radius-pill); color: var(--ns-on-accent, #fff); background: var(--ns-accent-dark, #1d4fb0); }
.rm-tag-mirror { background: var(--ns-ink-2, #5b3fa8); }

/* The run without the script: a fieldset a pair. */
.rm-pairs { display: grid; gap: var(--ns-space-3); max-width: 30rem; margin: 0 auto var(--ns-space-4); padding: 0; list-style: none; }
.rm-pair fieldset { display: flex; flex-wrap: wrap; gap: var(--ns-space-2) var(--ns-space-4); align-items: center; margin: 0; padding: var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.rm-pair .rm-duo { flex: 1 0 100%; }
.rm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3); justify-content: center; }
.rm > .rm-actions { margin: 0 0 var(--ns-space-3); }
.rm-actions > a { display: inline-flex; align-items: center; min-height: var(--ns-target); }
.rm-js .rm-pairs, .rm-js .rm-actions { display: none; }

/* The run with the script: one pair on its stage, its verdict a flash of the frame. */
.rm-stage { max-width: 30rem; margin: 0 auto var(--ns-space-3); padding: var(--ns-space-3); border-radius: var(--ns-radius-lg); box-shadow: 0 0 0 3px var(--ns-border); transition: box-shadow 0.15s; outline: none; }
.rm-stage:focus-visible { box-shadow: 0 0 0 3px var(--ns-focus, #2f6fde); }
.rm-stage.rm-hit { box-shadow: 0 0 0 5px var(--ns-ok, #2b8a3e); }
.rm-stage.rm-miss { box-shadow: 0 0 0 5px var(--ns-error, #c92a2a); }
.rm-pad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ns-space-3); max-width: 30rem; margin: 0 auto var(--ns-space-4); }
.rm-pad button { min-height: 4.5rem; font-size: var(--ns-size-lg); font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rm-pad button:active { transform: scale(0.97); }
.rm-pad kbd { margin-left: 0.4em; font-size: 0.7em; opacity: 0.75; }
@media (hover: none) { .rm-pad kbd { display: none; } }

/* The dots of the twenty answers: grey to come, outlined the current one, green right, red wrong. */
.rm-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 30rem; margin: 0 auto var(--ns-space-3); padding: 0; list-style: none; }
.rm-dots li { width: 10px; height: 10px; border-radius: 50%; background: var(--ns-border, #d0d5dd); }
.rm-dots li.rm-now { box-shadow: 0 0 0 2px var(--ns-text-strong, #222); }
.rm-dots li.rm-wait { background: var(--ns-muted, #8a94a6); }
.rm-dots li.rm-ok { background: var(--ns-ok, #2b8a3e); }
.rm-dots li.rm-ko { background: var(--ns-error, #c92a2a); }
.rm-dots-done { justify-content: flex-start; margin: var(--ns-space-2) 0; }
.rm-missed { margin: var(--ns-space-5) 0; }

/* A player who has a curve knows the game: the example goes with the lead (x-stats.recent, stats-recent.css). */
.stc-played ~ .rm-demo { display: none; }
/* On the result, the missed pairs are the lesson: one a row on a phone, two side by side on a screen. */
.rm-missed .rm-demo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }