/* Game neuroyale (jeux/neuroyale/CONCEPTION.md 2 and 15): classes ny-, loaded on the pages of the game only (DECISIONS
   arbitrage 10). Mobile first, 360 px wide: answer buttons of 64 px at least. The charte (v2/CHARTE.md): the site's
   tokens and components (.card, .flash, table.list, .visually-hidden, .button-primary) first, the classes of the game
   for what is its own. */

/* Colours of the game, on the wrapper of its pages (neuroyale.layout): the grey square of the perception round and its
   text. */
.ny { --ny-mask: #a8a8a8; --ny-mask-text: #222; }

.ny-tagline { margin: -0.4em 0 1em; font-size: var(--ns-size-lg); color: var(--ns-accent-dark); }
.ny-rules-short li { margin: 0.25em 0; }
.ny-aside { margin: 1.2em 0 0; font-size: var(--ns-size-sm); }
.ny-center { text-align: center; }
.ny-ok { color: var(--ns-ok); }
.ny-ko { color: var(--ns-error); }

/* Header of a round: "M2/7 · Calcul · fin 21:03:30 · 1 400 pts · 9e/18". */
.ny-head { display: flex; flex-wrap: wrap; gap: 0.2em 0.5em; margin: 0 0 0.6em; padding: var(--ns-space-2) var(--ns-space-3); background: var(--ns-accent-soft); border: 1px solid var(--ns-line); border-radius: var(--ns-radius-sm); }
.ny-head span + span::before { content: "·"; margin-right: 0.5em; color: var(--ns-title); }
.ny-head strong { color: var(--ns-accent-dark); }
.ny-time { margin: 0.3em 0; text-align: center; color: var(--ns-title); }
.ny-reply { margin: 0.3em 0; font-weight: bold; text-align: center; }
.ny-question { margin: 0.7em 0; font-size: var(--ns-size-xl); text-align: center; }

/* Answer grids. */
.ny-keypad, .ny-keys, .ny-choices { display: grid; gap: 0.4em; justify-content: center; margin: 0.6em 0; }
.ny-keypad, .ny-keys { grid-template-columns: repeat(4, minmax(64px, 4.6em)); }
.ny-choices { grid-template-columns: repeat(2, minmax(64px, 7em)); }
.ny-keypad button, .ny-keys button, .ny-choices button { min-height: 64px; padding: 0; font-size: 1.4rem; }

/* Memory. */
.ny-memo-chars { margin: 0.6em 0; font: bold 2.6rem/1.3 var(--ns-font-mono); letter-spacing: 0.3em; text-align: center; }
.ny-symbol { font: bold 2.2rem var(--ns-font-mono); color: var(--ns-accent-dark); }
/* Sequence: the number in each disc (the board of games-memoire draws empty discs). */
.ny-seq-board .crazy-btn { display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* Perception: the cloud, then a grey square once its exposure is over. */
.ny-cloud { display: flex; align-items: center; justify-content: center; width: 280px; max-width: 100%; aspect-ratio: 1; margin: 0.6em auto; background: var(--ny-mask); }
.ny-cloud img { display: block; max-width: 100%; height: auto; }
.ny-cloud p { margin: 0; color: var(--ny-mask-text); font-weight: bold; }
.ny-hide { animation: ny-hide 1000ms steps(1, end) forwards; }
@keyframes ny-hide { to { visibility: hidden; } }

/* Logic: the net and the 5 figures of the common component. */
.ny-figures figure { margin: 0 auto 0.6em; max-width: 220px; text-align: center; }
.ny-figures figure svg { width: 100%; height: auto; }
.ny-figures figcaption { font-size: var(--ns-size-sm); }
.ny-figures [role="group"] { display: flex; gap: 0.4em; justify-content: center; max-width: 36em; margin: 0 auto; }
.ny-figures button { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; max-width: 110px; min-height: 64px; padding: 0.2em; }
.ny-figures button svg { width: 100%; height: auto; }

/* Sequence. */
.ny-round-seq .field { margin: 0.6em auto; }
.ny-round-seq input[name="answer"] { width: 12em; font: bold 1.3rem var(--ns-font-mono); letter-spacing: 0.15em; text-align: center; }

/* Home, briefing, break, results. */
.ny-play { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; margin: 0.8em 0 1.2em; }
.ny-play button, .ny-play .button { font-size: var(--ns-size-lg); padding: 0.5em 1.2em; }
.ny-composition { font-weight: bold; }
.ny-seats { columns: 2 14em; margin: 0.6em 0; padding-left: 2.2em; }
.ny-seats li { break-inside: avoid; }
.ny-seat-house, .ny-seat-ghost { color: var(--ns-title); }
.ny-summary { font-size: var(--ns-size-lg); }
.ny-out { font-weight: bold; color: var(--ns-error); }
.ny-token select { margin: 0 0 var(--ns-space-3); }
.ny-actions { margin: 0.8em 0; }
.ny-me { font-weight: bold; background: var(--ns-accent-soft); }
.ny-gone { color: var(--ns-muted); }
.ny-cut td { font-size: var(--ns-size-sm); text-align: center; color: var(--ns-error); border-top: 2px solid var(--ns-error); }
.ny-place { font-size: 1.5rem; font-weight: bold; color: var(--ns-accent-dark); }
.ny-places { columns: 2 12em; padding-left: 2.5em; }

.ny-rating { font-size: var(--ns-size-lg); }
.ny-filter { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; margin: 0.6em 0; }
.ny-podiums li { margin: 0.2em 0; }
.ny-profile h2 { margin-bottom: 0.2em; }

/* Rooms: the code in big, the invitation link to copy, the host's settings. */
.ny-code strong { font-size: 2rem; letter-spacing: 0.15em; }
.ny-invite { width: 100%; max-width: 40em; }
.ny-room-settings label { display: block; margin: 0.2em 0; }
.ny-room-actions { display: flex; flex-wrap: wrap; gap: 0.8em; align-items: center; margin: 0.8em 0; }
.ny-room-actions form { display: flex; flex-wrap: wrap; gap: 0.3em; align-items: center; margin: 0; }
.ny-room-actions label { display: inline; margin: 0; }
/* To the finger (v2/CHARTE.md, mobile 2): each choice of the settings (its box in its label) and the link among the
   buttons of the actions, 44 px high. */
@media (max-width: 640px), (pointer: coarse) {
    .ny-room-settings label { display: flex; align-items: center; min-height: var(--ns-target); margin: 0; }
    .ny-room-actions > a { display: inline-flex; align-items: center; min-height: var(--ns-target); }
}

/* Replay of a round: the curves of the running raw, their legend. */
.ny-replay { margin: 1em 0; }
.ny-curves { width: 100%; max-width: 40em; height: auto; }
.ny-axis { stroke: var(--ns-off); stroke-width: 1; }
.ny-tick { font-size: 16px; fill: var(--ns-muted); }
.ny-curve { fill: none; stroke-width: 2.5; }
.ny-curve-viewer { stroke: var(--ns-accent-dark); stroke-width: 3.5; }
.ny-curve-winner { stroke: var(--ns-ok); stroke-dasharray: 8 4; }
.ny-curve-cut { stroke: var(--ns-error); stroke-dasharray: 2 4; }
.ny-legend { list-style: none; padding: 0; }
.ny-legend li::before { content: ""; display: inline-block; width: 2em; height: 0; margin-right: 0.5em; vertical-align: middle; border-top: 3px solid var(--ns-accent-dark); }
.ny-legend .ny-legend-winner::before { border-top: 3px dashed var(--ns-ok); }
.ny-legend .ny-legend-cut::before { border-top: 3px dotted var(--ns-error); }

/* Report by axis: one bar per axis. */
.ny-axes dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3em 0.8em; align-items: center; }
.ny-axes dd { margin: 0; }
.ny-axes meter { width: min(14em, 60%); height: 1em; vertical-align: middle; }

/* Automatic refresh line and facts tables. */
.ny-refresh { margin: 1.2em 0 0; font-size: var(--ns-size-sm); }
.ny-facts th { width: 50%; text-align: left; }

@media (max-width: 400px) {
    .ny-memo-chars { font-size: 2rem; letter-spacing: 0.2em; }
}

/* The replay is drawn at half its size on a phone: its ticks twice as big. */
@media (max-width: 600px) {
    .ny-tick { font-size: 24px; }
}