/* Eclipse: six rows of six cells, like the Sudoku board; the "=" and "×" signs sit on the line between two cells
   (game.js sets --r and --c, the first cell of the pair). Pieces are the images /j/diario/img/sol.png and lua.png. */
.eclipse { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); border: 3px solid var(--ink); border-radius: 1rem; overflow: hidden; background: var(--card); }
.eclipse button { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; border: 0; border-right: 1px solid #d9d0e2; border-bottom: 1px solid #d9d0e2; background: var(--card); padding: 0; cursor: pointer; }
.eclipse button:nth-of-type(6n) { border-right: 0; }
.eclipse button:nth-of-type(n+31) { border-bottom: 0; }
.eclipse img { width: 60%; height: auto; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.eclipse img[hidden] { display: none; }
.eclipse .given { background: #ebe7ee; cursor: default; }
.eclipse .hinted { background: #e6f3e7; }
.eclipse .wrong { background: #fdecec; box-shadow: inset 0 0 0 3px #c62828; }
.eclipse .sign { position: absolute; z-index: 1; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px #d9d0e2; color: var(--ink); font: 900 1.125rem/1 var(--title); pointer-events: none; }
.eclipse .sign.right { left: calc((var(--c) + 1) * 100% / 6); top: calc((var(--r) + .5) * 100% / 6); }
.eclipse .sign.down { left: calc((var(--c) + .5) * 100% / 6); top: calc((var(--r) + 1) * 100% / 6); }
.eclipse .sign.broken { background: #c62828; box-shadow: none; color: #fff; }
.finished .eclipse button { cursor: default; }

/* the win: a ray of light passes over every sun and moon, in a wave from the top left (game.js wave() sets --k); the
   piece's own picture is the mask, so the light runs only over the sun and the moon */
.finished .eclipse button:has(img[src$="sol.png"]:not([hidden])) { --piece: url(/j/diario/img/sol.png); }
.finished .eclipse button:has(img[src$="lua.png"]:not([hidden])) { --piece: url(/j/diario/img/lua.png); }
.finished .eclipse button:has(img:not([hidden]))::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 150% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--piece) center / 60% no-repeat; mask: var(--piece) center / 60% no-repeat;
  animation: piece-shine .6s ease-in-out 2 both; animation-delay: calc(var(--k, 0) * 60ms);   /* faster (Daniel: "um pouco mais rápido") */
}
@keyframes piece-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* and the pieces move a little: the moon sways, the sun puffs up (Daniel: "um leve balançar na lua e um leve inflar no sol"),
   in exactly the time of the passing light, same length, same start, same count ("nem antes nem depois") */
.finished .eclipse img[src$="lua.png"] { animation: moon-sway .6s ease-in-out 2 both; animation-delay: calc(var(--k, 0) * 60ms); }
.finished .eclipse img[src$="sol.png"] { animation: sun-puff .6s ease-in-out 2 both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes moon-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 70% { transform: rotate(8deg); } }
@keyframes sun-puff { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .finished .eclipse button::after { display: none; } .finished .eclipse img { animation: none; } }