/* Hueclash (domain Hueclash, refonte/DEV-rf-mini-c.md): the home card, the word on its stage, the four buttons. Prefixed
   classes, the colours of the frame from the tokens of neurostim.css; the four inks and the stage they are read on are
   the game itself (fixed: the same in both themes), on a dark stage where each ink stands out. */
.hc { --hc-stage: #1f2328; --hc-red: #ff6b6b; --hc-blue: #4dabf7; --hc-green: #69db7c; --hc-yellow: #ffd43b; }
.hc-sub { font-size: var(--ns-size-md); font-weight: 400; }
.hc-card { display: flex; flex-direction: column; gap: var(--ns-space-2); max-width: 30rem; margin: 0 0 var(--ns-space-5); }
.hc-card h2 { margin: var(--ns-space-2) 0 0; font-size: var(--ns-size-lg); }
.hc-card p, .hc-card form { margin: 0; }
.hc-time { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.hc-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5); }
.hc-rules { margin-top: var(--ns-space-6); }
.hc-clock { margin: 0 0 var(--ns-space-3); text-align: center; font-size: var(--ns-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-progress { text-align: center; color: var(--ns-muted); }

.hc-word { display: inline-block; padding: 0.15em 0.5em; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: var(--hc-stage); border-radius: var(--ns-radius-sm); }
.hc-ink-red { color: var(--hc-red); }
.hc-ink-blue { color: var(--hc-blue); }
.hc-ink-green { color: var(--hc-green); }
.hc-ink-yellow { color: var(--hc-yellow); }
.hc-demo { font-size: var(--ns-size-lg); }

.hc-trials { display: grid; gap: var(--ns-space-3); max-width: 30rem; margin: 0 auto var(--ns-space-4); padding: 0; list-style: none; }
.hc-trial 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); }
.hc-trial legend { padding: 0; font-size: var(--ns-size-lg); }
.hc-actions { display: flex; justify-content: center; }
.hc-js .hc-trials, .hc-js .hc-actions { display: none; }

.hc-stage { display: flex; align-items: center; justify-content: center; max-width: 30rem; min-height: 9rem; margin: 0 auto var(--ns-space-3); background: var(--hc-stage); border-radius: var(--ns-radius-lg); }
.hc-stage .hc-word { font-size: clamp(2rem, 11vw, 3.5rem); }
.hc-stage.hc-miss { box-shadow: 0 0 0 4px var(--ns-error); }
.hc-pad { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ns-space-3); max-width: 30rem; margin: 0 auto var(--ns-space-4); }
.hc-pad button { min-height: 4rem; font-size: var(--ns-size-lg); font-weight: 700; text-transform: uppercase; }

/* Colour blindness (the switch .hc-shapes-toggle): each ink also has its shape, after the word and before the name of its
   button; the word still names another colour. */
.hc-help { margin: 0 0 var(--ns-space-3); text-align: center; }
.hc-shapes .hc-ink-red::after, .hc-shapes .hc-key-red::before, .hc-shapes label[data-c="red"]::after { content: "\25CF"; }
.hc-shapes .hc-ink-blue::after, .hc-shapes .hc-key-blue::before, .hc-shapes label[data-c="blue"]::after { content: "\25A0"; }
.hc-shapes .hc-ink-green::after, .hc-shapes .hc-key-green::before, .hc-shapes label[data-c="green"]::after { content: "\25B2"; }
.hc-shapes .hc-ink-yellow::after, .hc-shapes .hc-key-yellow::before, .hc-shapes label[data-c="yellow"]::after { content: "\25C6"; }
.hc-shapes .hc-word::after { margin-left: 0.35em; font-size: 0.8em; }
.hc-shapes .hc-pad button::before { margin-right: 0.4em; }
.hc-shapes .hc-trial label::after { margin-left: 0.3em; }
.hc-shapes-toggle[aria-pressed="true"] { color: var(--ns-on-accent); background: var(--ns-accent-dark); border-color: var(--ns-accent-dark); }