/* Fifteen — Manu Arcade No. XVI
   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 size selector mirrors the toggle look but reads as a segmented group. */
.sizes { display: inline-flex; gap: 6px; }
.size {
  font-family: var(--caps); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; color: var(--ink-light); background: transparent;
  border: 1px solid rgba(122,104,80,.35); padding: 6px 10px; cursor: pointer;
  border-radius: 6px;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.size:hover { color: var(--oxblood); border-color: rgba(90,26,31,.4); }
.size[aria-pressed="true"] {
  color: var(--parchment); background: var(--oxblood); border-color: var(--oxblood);
}

/* The board is a square parchment tray. 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 taps ourselves; stop the page scrolling */
  cursor: pointer;
  border-radius: 8px;
  max-width: 100%;
  /* A soft drop so the tray sits proud of the candlelit page. */
  box-shadow: 0 10px 30px rgba(20,14,8,.34), 0 2px 6px rgba(20,14,8,.22);
}

/* Instruction caption floats just below the tray until the first slide. */
.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.3vw, 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);
}

/* Seal "won" flourish keeps a tiny tactile nod on scramble/solve. */
.seal-face { line-height: 1; transition: transform .3s var(--ease); }
.seal.won { background: radial-gradient(circle at 38% 32%, var(--gold-bright), var(--gold) 55%, var(--gold-deep) 100%); }
.seal:active .seal-face { transform: rotate(90deg); }

@media (max-width: 420px) {
  .hud { gap: 10px; }
  .sizes { gap: 4px; }
  .size { padding: 6px 8px; letter-spacing: .08em; }
  .hint-overlay { white-space: normal; max-width: 86vw; }
}