/* Conquista: 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 flag. 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. */
.conquista { 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; }
.conquista 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; }
.conquista .wall-right { border-right: 3px solid var(--ink); }
.conquista .wall-bottom { border-bottom: 3px solid var(--ink); }
.conquista .last-col { border-right: 0; }
.conquista .last-row { border-bottom: 0; }
.conquista button:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }

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

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

/* a flag put by Dica: a thin green ring; a flag that breaks a rule: red stripes over the region colour and a red ring */
.conquista .hinted { box-shadow: inset 0 0 0 3px rgba(29, 122, 34, .55); }
.conquista .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 .conquista { pointer-events: none; }

/* the "Marcar X automático" option, under the board */
.auto-x { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.0625rem var(--title); color: var(--ink); cursor: pointer; }
.auto-x input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* the win: every flag shines gold, one after the other (Daniel, 12/10/2026: "um brilho nas bandeirinhas") */
@keyframes flag-shine {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 210, 60, 0)) brightness(1); }
  40% { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 .6rem rgba(255, 210, 60, .95)) brightness(1.25); }
}
.finished .conquista .is-flag img { animation: flag-shine 1.1s ease-in-out 3; animation-delay: calc(var(--k, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .finished .conquista .is-flag img { animation: none; } }