/* Tangó: rounded dark tiles on the black stage; suns and moons are the only colour. */
.t-frame { container-type: inline-size; }
.t-board {
  --n: 6;
  --gap: clamp(4px, 1.3cqw, 7px);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: var(--gap);
  outline: none;
}
.t-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: clamp(8px, 2.4cqw, 14px);
  background: #1c1c1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-spring);
}
@media (hover: hover) {
  .t-board:not(.locked) .t-cell:not(.given):hover { background: #2c2c2e; }
}
.t-board:not(.locked) .t-cell:not(.given):active { transform: scale(.94); }
.t-cell.given { background: #3a3a3c; cursor: default; }
.t-board.locked .t-cell { cursor: default; }
.t-cell svg { width: 62%; height: 62%; pointer-events: none; }
.t-cell svg.t-moon { width: 56%; height: 56%; }
.t-cell svg.t-pop { animation: t-pop .42s var(--ease-spring); }
@keyframes t-pop { from { transform: scale(.4) rotate(-40deg); opacity: .2; } }

/* Keyboard focus ring (shown only after keyboard use). */
.t-board.kb:focus-visible .t-cell.focus,
.t-board.kb:focus .t-cell.focus { box-shadow: 0 0 0 2px var(--game); z-index: 1; }
.t-board:focus-visible { outline: none; }

/* Constraint badges sit on the shared edge of two cells. */
.t-sign {
  --s: clamp(16px, 5cqw, 24px);
  position: absolute; z-index: 2;
  width: var(--s); height: var(--s);
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #000;
  box-shadow: 0 0 0 3px var(--stage-bg, #000);
  font-size: calc(var(--s) * .64); font-weight: 650; line-height: 1;
  pointer-events: none;
  transition: background-color .2s, color .2s;
}
.t-sign.h { top: 50%; right: calc(var(--gap) / -2); transform: translate(50%, -50%); }
.t-sign.v { left: 50%; bottom: calc(var(--gap) / -2); transform: translate(-50%, 50%); }
.t-sign.err { background: var(--danger); color: #fff; }
.t-sign.h.t-bump { animation: t-bump-h .45s var(--ease-spring); }
.t-sign.v.t-bump { animation: t-bump-v .45s var(--ease-spring); }
@keyframes t-bump-h { 40% { transform: translate(50%, -50%) scale(1.35); } }
@keyframes t-bump-v { 40% { transform: translate(-50%, 50%) scale(1.35); } }

/* Rule violations. */
.t-cell.err::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--danger) 30%, transparent) 0 3px, transparent 3px 9px);
  box-shadow: inset 0 0 0 2px var(--danger);
  animation: t-fade .25s var(--ease-out);
}
@keyframes t-fade { from { opacity: 0; } }

.t-msg {
  min-height: 1.5em; margin: 12px 0 0; text-align: center;
  color: var(--danger); font-size: .92rem; font-weight: 550;
}
.t-msg:empty::before { content: "\00a0"; }

/* Server hints: the cell(s) to change pulse, the cells that explain why get a dashed ring. */
.t-cell.t-hint { z-index: 1; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--game); animation: t-hint-pulse 1.1s ease-in-out infinite; }
.t-cell.t-hint-focus { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.t-cell.t-hint-focus::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 2px dashed rgba(255, 255, 255, .45); pointer-events: none; }
@keyframes t-hint-pulse { 50% { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .t-cell.t-hint { animation: none; } }