/* Coroas: an 8x8 grid in 8 coloured regions, after the LinkedIn reference (docs/referencias/linkedin-jogos.png): a
   thick plum line between two regions, a thin one inside a region; a tap marks an X, two taps a crown. Region colours
   are pastels of the identity, checked by script: the X (#5f4875) has at least 4.99:1 on each, and the closest two
   (azul and lilás) are 16 apart in CIE76. No text under 1rem. */
.coroas { display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); grid-template-rows: repeat(var(--n, 8), 1fr); border: 3px solid var(--ink); border-radius: 1rem; overflow: hidden; background: var(--card); touch-action: none; }
.coroas button { display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; border: 0; border-right: 1px solid rgba(46, 10, 79, .2); border-bottom: 1px solid rgba(46, 10, 79, .2); font: 800 clamp(1.25rem, 5.5vw, 1.75rem)/1 var(--title); color: #5f4875; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.coroas .wall-right { border-right: 3px solid var(--ink); }
.coroas .wall-bottom { border-bottom: 3px solid var(--ink); }
.coroas .last-col { border-right: 0; }
.coroas .last-row { border-bottom: 0; }
.coroas button:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }

/* the regions */
.coroas .c0 { background-color: #f8c6d6; }   /* rosa */
.coroas .c1 { background-color: #fbd0ab; }   /* pêssego */
.coroas .c2 { background-color: #f8e39a; }   /* amarela */
.coroas .c3 { background-color: #cde7b2; }   /* verde */
.coroas .c4 { background-color: #b5e2da; }   /* turquesa */
.coroas .c5 { background-color: #bcd4f6; }   /* azul */
.coroas .c6 { background-color: #d9c6f4; }   /* lilás */
.coroas .c7 { background-color: #dfdbe4; }   /* cinza */

/* the marks: X as text, the crown as the drawn piece */
.coroas .x, .coroas .crown { display: none; pointer-events: none; }
.coroas .is-x .x { display: block; }
.coroas .is-crown .crown { display: block; width: 74%; height: auto; -webkit-user-drag: none; }

/* a crown put by Dica: a thin green ring; a crown that breaks a rule: red stripes over the region colour and a red ring */
.coroas .hinted { box-shadow: inset 0 0 0 3px rgba(29, 122, 34, .55); }
.coroas .wrong { background-image: repeating-linear-gradient(135deg, rgba(198, 40, 40, .32) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 3px #c62828; }
.finished .coroas { pointer-events: none; }