/* Lattice-specific styling. The shared palette.css supplies the masthead, HUD,
   gauges, seal, toggle, board frame, overlay, and colophon; this file only adds
   the hint line, the seal's game-over face, and canvas drag affordances. */

.board-frame canvas {
  cursor: grab;
  touch-action: none; /* we own all pointer gestures over the board */
}
.board-frame canvas:active { cursor: grabbing; }

/* The seal's glyph + a game-over tint. */
.seal .seal-face { line-height: 1; transform: translateY(-1px); }
.seal.over {
  background: radial-gradient(circle at 38% 32%, #8a8f86, #5f655c 55%, #3a3f38 100%);
  color: var(--parchment);
}

/* Hint / toast line beneath the board. */
.hint {
  margin: 0;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  color: var(--ink-light);
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.4;
  max-width: 38ch;
  min-height: 1.4em;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.hint strong { font-style: normal; color: var(--oxblood); font-weight: 600; }

/* When a combo or clear fires, the hint flares into a brief gold toast. */
.hint.toast {
  color: var(--gold-deep);
  font-style: normal;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(13px, 1.9vw, 16px);
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .hint { transition: none; }
}