/* Mosaic · Manu Arcade No. XXVII
   Game-specific styling only. The shell (masthead, hud, seal, toggles,
   board-frame, overlay, colophon) comes from ../_shared/palette.css.
   No em dashes in any on-screen copy by house style. */

/* The gold "best" star gauge glyph. */
.gauge-glyph.gold { color: var(--gold-deep); }

/* The board is a square pane. Give the frame an explicit width so it does not
   collapse around the canvas (the renderer sizes the canvas from this width).
   Reserve room below for the floating hint so it never clips the colophon. */
.board-frame {
  width: min(480px, 94vw);
  margin-bottom: 38px;
  display: flex;
  justify-content: center;
}
#board {
  display: block;
  touch-action: none;        /* we handle taps + drags ourselves; stop page scroll */
  cursor: pointer;
  border-radius: 8px;
  max-width: 100%;
}

/* Instruction caption floats just below the grid until the first successful swap. */
.hint-overlay {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 96vw;
  white-space: nowrap;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(12px, 3.2vw, 16px);
  color: var(--ink-light);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hint-overlay.gone {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

/* The wax-seal "new mosaic" button face, mirroring the sibling games. */
.seal-face { line-height: 1; transition: transform .3s var(--ease); }
.seal:active .seal-face { transform: rotate(-90deg); }

/* On a narrow phone the hint can wrap to two lines, so let it. */
@media (max-width: 440px) {
  .hud { gap: 9px; }
  .hint-overlay { white-space: normal; max-width: 88vw; line-height: 1.35; }
}