/* Tintmatch: the cards of the home page and its demo, the stage of the colour (full screen while it shows), the three
   sliders and the pairs of the result. Prefixed classes, tokens of neurostim.css; the colours of the game are its own. */
.tm-sub { font-size: var(--ns-size-lg); font-weight: 400; }
.tm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4); margin: 0 0 var(--ns-space-5); }
.tm-card { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.tm-card h2 { margin: 0; }
.tm-card p, .tm-card form { margin: 0; }
.tm-score { font-size: var(--ns-size-2xl, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.tm-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5); }
.tm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3); margin: 0 0 var(--ns-space-4); }
.tm-actions form { margin: 0; }
.tm > .tm-actions { justify-content: center; }
.tm-actions > a { display: inline-flex; align-items: center; min-height: var(--ns-target, 2.75rem); }
.tm-rules { margin-top: var(--ns-space-6); }

/* The demo: a colour shows, goes, is made again, then both side by side (a loop of 8 s). */
.tm-demo { width: min(100%, 26rem); margin: 0 auto var(--ns-space-5); }
.tm-demo-stage { position: relative; display: flex; height: 9rem; overflow: hidden; border-radius: var(--ns-radius-lg, 12px); background: hsl(200 20% 88%); box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
.tm-demo-was, .tm-demo-mine { position: relative; flex: 1 1 50%; }
.tm-demo-was { background: hsl(338 72% 52%); animation: tm-demo-was 8s infinite; }
.tm-demo-mine { background: hsl(180 50% 50%); animation: tm-demo-mine 8s infinite; }
.tm-demo span, .tm-half span { position: absolute; top: .5rem; left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: rgb(0 0 0 / .45); color: #fff; font-size: var(--ns-size-sm, .875rem); }
.tm-demo-score { position: absolute; inset: auto 0 .6rem; margin: 0; text-align: center; color: #fff; font-size: 2rem; font-weight: 800; text-shadow: 0 2px 8px rgb(0 0 0 / .5); animation: tm-demo-score 8s infinite; }
.tm-demo-score small, .tm-mark small { font-size: .5em; opacity: .85; }
.tm-demo-bars { display: grid; gap: .3rem; margin: .5rem 0 0; }
.tm-demo-bars i { display: block; height: .5rem; border-radius: 999px; background: linear-gradient(90deg, #f33, #ff3, #3f3, #3ff, #33f, #f3f, #f33); position: relative; }
.tm-demo-bars i:nth-child(2) { background: linear-gradient(90deg, hsl(338 0% 52%), hsl(338 100% 52%)); }
.tm-demo-bars i:nth-child(3) { background: linear-gradient(90deg, #000, hsl(338 72% 52%), #fff); }
.tm-demo-bars i::after { content: ""; position: absolute; top: -.2rem; width: .9rem; height: .9rem; margin-left: -.45rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgb(0 0 0 / .5); left: 50%; animation: tm-demo-h 8s infinite; }
.tm-demo-bars i:nth-child(2)::after { animation-name: tm-demo-s; }
.tm-demo-bars i:nth-child(3)::after { animation-name: tm-demo-l; }
.tm-demo-steps { display: flex; justify-content: space-between; gap: var(--ns-space-2); margin: .6rem 0 0; padding: 0; list-style: none; font-size: var(--ns-size-sm, .875rem); text-align: center; }
.tm-demo-steps li { flex: 1; opacity: .45; animation: tm-demo-step 8s infinite; }
.tm-demo-steps li:nth-child(2) { animation-delay: 2.4s; }
.tm-demo-steps li:nth-child(3) { animation-delay: 5.6s; }
@keyframes tm-demo-was { 0%, 28% { flex-basis: 100%; } 30%, 68% { flex-basis: 0; } 72%, 100% { flex-basis: 50%; } }
@keyframes tm-demo-mine { 0%, 30% { background: hsl(180 50% 50%); } 45% { background: hsl(320 50% 50%); } 58% { background: hsl(336 66% 50%); } 66%, 100% { background: hsl(340 70% 54%); } }
@keyframes tm-demo-score { 0%, 70% { opacity: 0; transform: scale(.6); } 76%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tm-demo-h { 0%, 30% { left: 50%; } 45%, 100% { left: 94%; } }
@keyframes tm-demo-s { 0%, 45% { left: 50%; } 58%, 100% { left: 70%; } }
@keyframes tm-demo-l { 0%, 58% { left: 50%; } 66%, 100% { left: 53%; } }
@keyframes tm-demo-step { 0%, 30% { opacity: 1; font-weight: 700; } 36%, 100% { opacity: .45; font-weight: 400; } }
@media (prefers-reduced-motion: reduce) {
    .tm-demo *, .tm-demo *::after { animation: none !important; }
    .tm-demo-was { flex-basis: 50%; }
    .tm-demo-mine { background: hsl(340 70% 54%); }
    .tm-demo-steps li { opacity: 1; }
}

/* The game. */
.tm-status { display: flex; justify-content: center; gap: var(--ns-space-5); margin: 0 0 var(--ns-space-3); font-variant-numeric: tabular-nums; }
.tm-status output { font-weight: 700; color: var(--ns-text-strong); }
.tm-game { --mine: hsl(var(--h) calc(var(--s) * 1%) calc(var(--l) * 1%)); width: min(100%, 34rem); margin: 0 auto var(--ns-space-4); text-align: center; }
.tm-stage { position: relative; display: flex; height: min(46vh, 20rem); min-height: 12rem; margin: 0 0 var(--ns-space-3); overflow: hidden; border-radius: var(--ns-radius-lg, 12px); background: var(--ns-tint, #f4f4f6); box-shadow: inset 0 0 0 2px var(--ns-border, #ddd); }
.tm-half { position: relative; display: none; flex: 1 1 50%; }
.tm-was { background: var(--ns-tint, #eee); }
.tm-mine { background: var(--mine); }
.tm-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; pointer-events: none; }
.tm-screen { max-width: 90%; margin: 0; font-size: var(--ns-size-lg, 1.25rem); font-weight: 700; }
.tm-full .tm-screen, .tm-make .tm-screen, .tm-judge .tm-screen { padding: .3rem .9rem; border-radius: 999px; background: rgb(0 0 0 / .45); color: #fff; }
.tm-mark { margin: 0; color: #fff; font-size: 3.5rem; line-height: 1; font-weight: 800; text-shadow: 0 2px 12px rgb(0 0 0 / .55); }
.tm-mark[hidden] { display: none; }
.tm-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgb(255 255 255 / .8); transform: scaleX(0); transform-origin: left; }
/* The colour to remember fills the screen. */
.tm-full { position: fixed; inset: 0; z-index: 1000; height: auto; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; }
.tm-full .tm-was { display: block; flex-basis: 100%; }
.tm-full .tm-was span { display: none; }
.tm-full .tm-timer { height: 10px; }
.tm-make { height: min(30vh, 15rem); min-height: 8rem; }
.tm-make .tm-mine { display: block; flex-basis: 100%; }
.tm-make .tm-mine span { display: none; }
.tm-make .tm-screen { position: absolute; top: .75rem; font-size: var(--ns-size-md, 1rem); font-weight: 600; }
.tm-judge .tm-half { display: block; }
.tm-judge .tm-mine span { left: auto; right: .5rem; }

.tm-form { display: grid; gap: var(--ns-space-2); margin: 0 0 var(--ns-space-3); }
.tm-form[hidden] { display: none; }
.tm-slider { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; align-items: center; gap: var(--ns-space-2); margin: 0; text-align: left; }
.tm-slider output { font-variant-numeric: tabular-nums; text-align: right; color: var(--ns-muted); }
.tm-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; margin: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); cursor: pointer; background: var(--track); touch-action: none; }
.tm-slider input:focus-visible { outline: 3px solid var(--ns-focus, var(--ns-accent, #ff3399)); outline-offset: 3px; }
.tm-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 2.75rem; border-radius: 999px; background: var(--mine); border: 4px solid #fff; box-shadow: 0 1px 6px rgb(0 0 0 / .45); }
.tm-slider input::-moz-range-thumb { width: 1.3rem; height: 2.4rem; border-radius: 999px; background: var(--mine); border: 4px solid #fff; box-shadow: 0 1px 6px rgb(0 0 0 / .45); }
.tm-slider-h input { --track: linear-gradient(90deg, hsl(0 calc(var(--s) * 1%) calc(var(--l) * 1%)), hsl(60 calc(var(--s) * 1%) calc(var(--l) * 1%)), hsl(120 calc(var(--s) * 1%) calc(var(--l) * 1%)), hsl(180 calc(var(--s) * 1%) calc(var(--l) * 1%)), hsl(240 calc(var(--s) * 1%) calc(var(--l) * 1%)), hsl(300 calc(var(--s) * 1%) calc(var(--l) * 1%)), hsl(360 calc(var(--s) * 1%) calc(var(--l) * 1%))); }
.tm-slider-s input { --track: linear-gradient(90deg, hsl(var(--h) 0% calc(var(--l) * 1%)), hsl(var(--h) 100% calc(var(--l) * 1%))); }
.tm-slider-l input { --track: linear-gradient(90deg, hsl(var(--h) calc(var(--s) * 1%) 0%), hsl(var(--h) calc(var(--s) * 1%) 50%), hsl(var(--h) calc(var(--s) * 1%) 100%)); }
.tm-send { margin: var(--ns-space-2) 0 0; text-align: center; }
.tm-send button, .tm-go button { min-width: 12rem; min-height: var(--ns-target, 2.75rem); font-size: var(--ns-size-lg, 1.125rem); }
.tm-go { margin: 0; }
.tm-go button[hidden] { display: none; }
@media (max-width: 30rem) {
    .tm-slider { grid-template-columns: 1fr 2.5rem; }
    .tm-slider label { grid-column: 1 / -1; margin-bottom: -.25rem; }
    .tm-slider input { grid-column: 1; }
}

/* The result: the five colours and the player's. */
.tm-pairs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ns-space-2); margin: 0 0 var(--ns-space-4); padding: 0; list-style: none; }
.tm-pair { display: grid; grid-template-rows: 3.5rem 3.5rem auto; overflow: hidden; border-radius: var(--ns-radius, 8px); text-align: center; box-shadow: 0 2px 10px rgb(0 0 0 / .12); }
.tm-pair-none { display: flex; align-items: center; justify-content: center; background: var(--ns-tint, #eee); color: var(--ns-muted); font-weight: 700; }
.tm-pair b { padding: .2rem 0; font-variant-numeric: tabular-nums; }
.tm-total { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; }
.tm-score-big { white-space: nowrap; font-size: clamp(2.5rem, 12vw, 3.5rem); line-height: 1; font-weight: 800; color: var(--ns-text-strong); font-variant-numeric: tabular-nums; }
.tm-score-line { text-align: center; font-variant-numeric: tabular-nums; }