/* Crowns: lavender. A pastel board with crisp black lines between regions,
   black crowns, and little x notes. Breaking a rule stripes the square red;
   winning makes the crowns hop, row by row. */

.crowns { --game: #bca7e8; gap: 16px; }

.bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sub { margin: 0; font-size: 14px; font-weight: 600; }
.clock { font: 700 20px var(--ui); font-variant-numeric: tabular-nums; }

.board {
  --n: 7;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  border: 3px solid var(--ink); border-radius: 6px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.cell {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  padding: 0; border: 0; cursor: pointer; background: var(--c);
  border-right: 1px solid rgba(0, 0, 0, 0.16); border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.cell.br { border-right: 2.5px solid var(--ink); }
.cell.bb { border-bottom: 2.5px solid var(--ink); }
.cell.last-c { border-right: 0; }
.cell.last-r { border-bottom: 0; }
.cell:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* the x note: two thin strokes */
.cell .x { position: relative; width: 28%; aspect-ratio: 1; }
.cell .x::before, .cell .x::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px;
  background: rgba(0, 0, 0, 0.5); border-radius: 1px;
}
.cell .x::before { transform: rotate(45deg); }
.cell .x::after { transform: rotate(-45deg); }

.cell svg { width: 60%; height: 60%; fill: var(--ink); }
.cell.crown svg { animation: set 0.18s var(--ease); }
.cell.bad { background-image: repeating-linear-gradient(45deg, rgba(214, 69, 52, 0.38) 0 3px, transparent 3px 8px); }
.cell.bad svg { fill: var(--red); }
.cell.hint { box-shadow: inset 0 0 0 3px var(--ink); animation: blink 0.9s ease-in-out 3; }
.board.won .cell.crown svg { animation: hop 0.5s var(--ease) both; animation-delay: calc(var(--r) * 60ms); }

@keyframes set { from { transform: scale(0.6); } }
@keyframes blink { 50% { box-shadow: inset 0 0 0 3px transparent; } }
@keyframes hop { 40% { transform: translateY(-18%) scale(1.08); } }

.btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.btns .btn { width: 100%; }

/* help */
.demo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 4px; font-size: 14px; }
.demo div { display: flex; align-items: center; gap: 10px; }
.demo span.sq { flex: 0 0 34px; height: 34px; display: grid; place-items: center; background: #c3b1e1; border: 1.5px solid var(--ink); }
.demo .sq svg { width: 62%; height: 62%; fill: var(--ink); }
.demo .sq .x { position: relative; width: 30%; aspect-ratio: 1; }
.demo .sq .x::before, .demo .sq .x::after { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; background: rgba(0, 0, 0, 0.55); }
.demo .sq .x::before { transform: rotate(45deg); }
.demo .sq .x::after { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .cell.crown svg, .cell.hint, .board.won .cell.crown svg { animation: none; }
}