/* Crownfield (domain Crownfield): the home cards, the board of coloured zones and its crowns, the animated example.
   Prefixed classes; the colours of the zones are the game's own, the others from the tokens of neurostim.css. */
.cf-day { font-size: var(--ns-size-lg, 1.25rem); font-weight: 400; }
.cf-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-4, 1rem) var(--ns-space-5, 1.5rem); margin-bottom: var(--ns-space-4, 1rem); }
.cf-hero > div { flex: 1 1 18rem; min-width: 0; }
.cf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4, 1rem); margin: 0 0 var(--ns-space-5, 1.5rem); }
.cf-card { display: flex; flex-direction: column; gap: var(--ns-space-2, 0.5rem); }
.cf-card h3 { margin: 0; }
.cf-card p, .cf-card form { margin: 0; }
.cf-time { font-size: var(--ns-size-2xl, 1.75rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong, #111); }
.cf-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5, 1.5rem); }
.cf-rules { margin-top: var(--ns-space-6, 2rem); }
.cf-clock { margin: 0 0 var(--ns-space-2, 0.5rem); text-align: center; font-size: var(--ns-size-xl, 1.5rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-goal { margin: 0 auto var(--ns-space-3, 0.75rem); max-width: 34rem; text-align: center; font-weight: 600; }

/* The board: n columns of square cells, never wider than the page (390 px: 8 cells of 40 px); a thick line between
   two zones (cf-t above the cell, cf-l on its left), the frame around. */
.cf-board {
    --cf-cell: min(3.25rem, calc((100vw - 4rem) / var(--cf-n)));
    --cf-line: var(--ns-ink, #2a2124);
    --cf-g0: #ffd6a5; --cf-g1: #b9f0b0; --cf-g2: #a5ecf5; --cf-g3: #cdc4ff; --cf-g4: #ffc2ea; --cf-g5: #f9f5a1; --cf-g6: #a9c8ff; --cf-g7: #d9d2c4;
    display: grid; grid-template-columns: repeat(var(--cf-n), var(--cf-cell)); grid-auto-rows: var(--cf-cell);
    width: max-content; margin: 0 auto var(--ns-space-4, 1rem); border: 3px solid var(--cf-line); border-radius: 4px;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cf-c { position: relative; margin: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 0 solid var(--cf-line); box-shadow: inset 0 0 0 0.5px rgba(42, 33, 36, 0.28); cursor: pointer; }
.cf-c.cf-t { border-top-width: 3px; }
.cf-c.cf-l { border-left-width: 3px; }
.cf-g0 { background: var(--cf-g0); } .cf-g1 { background: var(--cf-g1); } .cf-g2 { background: var(--cf-g2); } .cf-g3 { background: var(--cf-g3); }
.cf-g4 { background: var(--cf-g4); } .cf-g5 { background: var(--cf-g5); } .cf-g6 { background: var(--cf-g6); } .cf-g7 { background: var(--cf-g7); }
/* The box covers its cell: a tap ticks it without the script; its mark is the span beside it. */
.cf-c input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-c input:disabled { cursor: default; }
.cf-c span { display: block; width: 72%; height: 72%; pointer-events: none; }
.cf-c input:focus-visible + span { outline: 3px solid var(--ns-focus, #cc0066); outline-offset: 2px; border-radius: 4px; }
/* The crown: a mask in the colour of the ink, red in a conflict, gold once the grid is right. */
.cf-c input:checked + span, .cf-demo i {
    background: var(--ns-ink, #2a2124);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l5 4 5-7 5 7 5-4-2 12H4z'/%3E%3Crect x='4' y='20' width='16' height='2.5' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l5 4 5-7 5 7 5-4-2 12H4z'/%3E%3Crect x='4' y='20' width='16' height='2.5' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cf-js .cf-c input:checked + span { animation: cf-pop 0.18s ease-out; }
/* A cross put by the player, a dot for a cell ruled out by a crown (Croix auto). */
.cf-c.cf-x span::after, .cf-c.cf-a span::after { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; line-height: 1; color: var(--ns-ink, #2a2124); }
.cf-c.cf-x span::after { content: "\00D7"; font-size: calc(var(--cf-cell) * 0.55); opacity: 0.75; }
.cf-c.cf-a span::after { content: "\2022"; font-size: calc(var(--cf-cell) * 0.32); opacity: 0.4; }
/* A row, column or zone with two crowns hatched, the crowns in conflict red. */
.cf-c.cf-hot { background-image: repeating-linear-gradient(135deg, rgba(198, 40, 40, 0.22) 0 4px, transparent 4px 9px); }
.cf-c.cf-bad input:checked + span { background: var(--ns-error, #c62828); animation: cf-shake 0.3s; }
.cf-win .cf-c input:checked + span { background: #b8860b; animation: cf-win 0.6s ease-out; }
.cf-small .cf-c input:checked + span { background: #b8860b; }
.cf-js .cf-board { touch-action: none; }
@keyframes cf-pop { from { transform: scale(0.4); } }
@keyframes cf-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes cf-win { 50% { transform: scale(1.25); } }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3, 0.75rem); justify-content: center; margin: 0 0 var(--ns-space-3, 0.75rem); }

/* The example of the home page: its crowns appear one after the other, again and again. */
.cf-demo { margin: 0 auto; flex: 0 1 auto; text-align: center; }
.cf-demo .cf-board { --cf-cell: 2.4rem; margin-bottom: var(--ns-space-2, 0.5rem); }
.cf-demo .cf-c { cursor: default; }
.cf-demo i { display: block; width: 72%; height: 72%; opacity: 0; animation: cf-demo 7s calc(var(--cf-d) * 0.9s) infinite; }
.cf-demo figcaption { max-width: 16rem; margin: 0 auto; font-size: var(--ns-size-sm, 0.875rem); color: var(--ns-muted, #5d6867); }
@keyframes cf-demo { 0% { opacity: 0; transform: scale(0.4); } 6%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cf-demo i { animation: none; opacity: 1; } .cf-c span { animation: none !important; } }

/* The result: the crowns beside the time, the curve under them. */
.cf-result-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-4, 1rem); }
.cf-small .cf-board { --cf-cell: 1.6rem; margin: 0; border-width: 2px; }
.cf-small .cf-c.cf-t { border-top-width: 2px; }
.cf-small .cf-c.cf-l { border-left-width: 2px; }
.cf-result-top > div:last-child { flex: 1 1 6rem; min-width: 0; }
.cf-result-top p { margin: 0 0 var(--ns-space-2, 0.5rem); }