/* Mnemosaic (jeux/mnemosaic/CONCEPTION.md 3.4 and 13): palette, mosaics and the brush input in pure CSS (:has()),
   without JavaScript. Classes prefixed mn-. Contrast mode (help for colour blindness): a pattern on each tint.
   The charte of the site (v2/CHARTE.md) gives the tokens and the components (nav.tabs, .inline, .visually-hidden);
   the palette and the board stay here. */
.mn-page {
    --mn-c0: #f3efe6; --mn-c1: #d55e00; --mn-c2: #56b4e9; --mn-c3: #009e73; --mn-c4: #e6d83e; --mn-ink: #1d1d1b;
    --mn-p1: none; --mn-p2: none; --mn-p3: none; --mn-p4: none;
    /* Edges of the tiles (paper) and of the dots. */
    --mn-edge: #d6cfbf; --mn-dot-line: #aaa;
}
.mn-contrast {
    --mn-p1: repeating-linear-gradient(45deg, rgba(0,0,0,.45) 0 2px, transparent 2px 8px);
    --mn-p2: radial-gradient(circle, rgba(0,0,0,.55) 2px, transparent 2.5px) 0 0 / 8px 8px;
    --mn-p3: repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, transparent 1px 7px);
    --mn-p4: repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 2px, transparent 2px 8px);
}
.mn-c0 { background: var(--mn-c0); }
.mn-c1, .mn-cell input.mn-k1:checked ~ .mn-face { background: var(--mn-p1), var(--mn-c1); }
.mn-c2, .mn-cell input.mn-k2:checked ~ .mn-face { background: var(--mn-p2), var(--mn-c2); }
.mn-c3, .mn-cell input.mn-k3:checked ~ .mn-face { background: var(--mn-p3), var(--mn-c3); }
.mn-c4, .mn-cell input.mn-k4:checked ~ .mn-face { background: var(--mn-p4), var(--mn-c4); }
.mn-tile.mn-s1::after, .mn-dot.mn-s1::after, .mn-cell input.mn-s1:checked ~ .mn-face::after { content: "\25CF"; }
.mn-tile.mn-s2::after, .mn-dot.mn-s2::after, .mn-cell input.mn-s2:checked ~ .mn-face::after { content: "\2715"; }

.mn-grid { border-collapse: separate; border-spacing: 3px; margin: .5em auto; }
/* Coordinates of the grid at 5.8:1 (#777 had 4.48:1). */
.mn-grid th { padding: 0 2px; font-size: var(--ns-size-xs); font-weight: normal; color: var(--ns-muted); }
.mn-tile, .mn-cell { position: relative; width: 52px; height: 52px; padding: 0; color: var(--mn-ink); border-radius: 3px; }
.mn-tile { border: 1px solid var(--mn-edge); }
.mn-w4 .mn-cell, .mn-w5 .mn-cell, .mn-grid-lg.mn-w4 .mn-tile, .mn-grid-lg.mn-w5 .mn-tile { width: 64px; height: 64px; }
.mn-grid-md .mn-tile { width: 36px; height: 36px; }
.mn-grid-sm { display: inline-table; margin: 0 4px 0 0; border-spacing: 1px; vertical-align: middle; }
.mn-grid-sm .mn-tile { width: 22px; height: 22px; font-size: 12px; border-radius: 1px; }
.mn-tile::after, .mn-face::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5em; line-height: 1; }
.mn-grid-lg .mn-tile::after, .mn-face::after { font-size: 1.9em; }
.mn-drift { outline: 3px dashed var(--mn-ink); outline-offset: -4px; }

.mn-cell input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.mn-face { position: absolute; inset: 0; background: var(--mn-c0); border: 1px solid var(--mn-edge); border-radius: 3px; }
.mn-cell input:focus-visible ~ .mn-face { outline: 3px solid var(--ns-focus); }
/* margin: 0, the site's 4 px under a label would shorten the cell's target. */
.mn-cell label { display: none; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.mn-form:has(#mn-brush-k0:checked) .mn-cell label.mn-k0, .mn-form:has(#mn-brush-k1:checked) .mn-cell label.mn-k1,
.mn-form:has(#mn-brush-k2:checked) .mn-cell label.mn-k2, .mn-form:has(#mn-brush-k3:checked) .mn-cell label.mn-k3,
.mn-form:has(#mn-brush-k4:checked) .mn-cell label.mn-k4, .mn-form:has(#mn-brush-s0:checked) .mn-cell label.mn-s0,
.mn-form:has(#mn-brush-s1:checked) .mn-cell label.mn-s1, .mn-form:has(#mn-brush-s2:checked) .mn-cell label.mn-s2 { display: block; }

.mn-palette { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); margin: 0 0 var(--ns-space-3); padding: 0; border: 0; }
.mn-palette legend { margin-bottom: var(--ns-space-1); }
.mn-palette input { position: absolute; opacity: 0; }
.mn-swatch { display: inline-flex; align-items: center; gap: var(--ns-space-2); min-height: var(--ns-target); padding: 0 var(--ns-space-3); border: 2px solid var(--ns-border-strong); border-radius: var(--ns-radius-pill); cursor: pointer; }
.mn-palette input:checked + .mn-swatch { border-color: var(--ns-accent-dark); box-shadow: 0 0 0 2px var(--ns-accent-dark); }
.mn-palette input:focus-visible + .mn-swatch { outline: 3px dashed var(--ns-focus); outline-offset: 2px; }
.mn-dot { position: relative; width: 24px; height: 24px; color: var(--mn-ink); border: 1px solid var(--mn-dot-line); border-radius: 4px; }
.mn-dot::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

@supports not selector(:has(*)) {
    .mn-palette { display: none; }
    .mn-cell label { position: relative; z-index: 1; display: block; float: left; width: 28%; height: 28%; margin: 1px; border: 1px solid var(--mn-ink); border-radius: 50%; }
    .mn-cell label.mn-k0 { background: var(--mn-c0); } .mn-cell label.mn-k1 { background: var(--mn-c1); }
    .mn-cell label.mn-k2 { background: var(--mn-c2); } .mn-cell label.mn-k3 { background: var(--mn-c3); }
    .mn-cell label.mn-k4 { background: var(--mn-c4); } .mn-cell label.mn-s1, .mn-cell label.mn-s2 { background: var(--ns-page); }
}
@media (max-width: 400px) {
    .mn-grid { border-spacing: 2px; }
    .mn-cell, .mn-grid-lg .mn-tile { width: 44px; height: 44px; }
    .mn-w4 .mn-cell, .mn-w5 .mn-cell, .mn-grid-lg.mn-w4 .mn-tile, .mn-grid-lg.mn-w5 .mn-tile { width: 54px; height: 54px; }
}

.mn-context, .mn-deadline { color: var(--ns-muted); }
.mn-memo { font-size: var(--ns-size-xl); text-align: center; }
.mn-expose { text-align: center; }
.mn-score { font-size: var(--ns-size-xl); font-weight: 700; color: var(--ns-accent-dark); }
.mn-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ns-space-4); }
.mn-pair figure { margin: 0; text-align: center; }
.mn-menu, .mn-results { padding: 0; list-style: none; }
.mn-menu li, .mn-results li { margin: 0 0 var(--ns-space-3); }
.mn-results-label { display: inline-block; min-width: 11em; }
.mn-actions { text-align: center; }
.mn-table { border-collapse: collapse; } .mn-table th, .mn-table td { padding: 2px var(--ns-space-2); border-bottom: 1px solid var(--ns-border); }
.mn-list td, .mn-list th { padding: 1px 6px; }
.mn-play { margin: var(--ns-space-3) 0; }
.mn-cards, .mn-chain, .mn-list-plain { padding: 0; list-style: none; }
.mn-card { margin: 0 0 var(--ns-space-4); }
.mn-card .mn-thumbs { display: block; margin-top: var(--ns-space-1); }
.mn-tag { padding: 0 var(--ns-space-2); font-size: var(--ns-size-sm); border: 1px solid var(--ns-accent); border-radius: var(--ns-radius-pill); }
.mn-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3); margin: 0 0 var(--ns-space-3); }
.mn-chain-who { display: inline-block; min-width: 11em; }
.mn-recall { margin: var(--ns-space-3) 0; }
@media (min-width: 720px) { .mn-chain { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--ns-space-4); } }
.mn-description { display: block; margin: var(--ns-space-2) 0; padding: var(--ns-space-2) var(--ns-space-3); font-style: italic; border-left: 3px solid var(--ns-accent); }
.mn-describe textarea { width: 100%; max-width: 32em; }
.mn-award { font-weight: 700; }
.mn-ranking { padding-left: 0; list-style: none; }
.mn-ranking li { margin: 0 0 var(--ns-space-1); }
.mn-invite { width: 100%; max-width: 40em; }

/* Under a finger, or at 640 px and less (v2/CHARTE.md, mobile 2): the choices of a level, a variant or a vote (a label
   around its radio, without for), the links of the game's menu and the link of the other input mode, targets of 44 px. */
@media (max-width: 640px), (pointer: coarse) {
    .mn-choice label:not([for]) { padding-block: 0.625rem; }
    /* Inline flex as the site's plain lists (charte 7bdedda8): the text after a link stays on its line. */
    .mn-menu a:not(.button), .mn-actions a:not(.button) { display: inline-flex; align-items: center; min-height: var(--ns-target); }
}