/* 2048 — Manu Arcade No. VII
   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(460px, 92vw);
  margin-bottom: 34px;
  display: flex;
  justify-content: center;
}
#board {
  display: block;
  touch-action: none;        /* we handle swipe ourselves; stop the page scrolling */
  cursor: pointer;
  border-radius: 8px;
  max-width: 100%;
}

/* Instruction caption floats just below the grid until the first move. */
.hint-overlay {
  position: absolute;
  left: 50%;
  bottom: -28px;
  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(13px, 3.4vw, 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 seal "lose" treatment, mirroring the sibling games. */
.seal-face { line-height: 1; transition: transform .3s var(--ease); }
.seal.lose { background: radial-gradient(circle at 38% 32%, #6b5a48, #3a2e22 60%, #1a1410 100%); }
.seal:active .seal-face { transform: rotate(-90deg); }

@media (max-width: 420px) {
  .hud { gap: 10px; }
}