/* Sudoku — Manu Arcade No. XII
   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. */

/* Difficulty pills, styled like the shared toggles. */
.difficulties {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.diff {
  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: 7px 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.diff:hover { color: var(--oxblood); border-color: rgba(90, 26, 31, .4); }
.diff[aria-pressed="true"] {
  color: var(--parchment);
  background: var(--oxblood);
  border-color: var(--oxblood);
}

/* 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 pad. */
.board-frame {
  width: min(520px, 94vw);
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}
#board {
  display: block;
  touch-action: manipulation;
  cursor: pointer;
  border-radius: 6px;
  max-width: 100%;
}

/* Instruction caption floats just below the grid until the first entry. */
.hint-overlay {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 96vw;
  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 on-screen number pad: ten keys (1-9 plus erase) on a parchment row. */
.pad {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(5px, 1.4vw, 9px);
  width: min(520px, 94vw);
}
.pad-key {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(18px, 4.4vw, 26px);
  color: var(--oxblood);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .04)),
    var(--parchment-warm);
  border: 1px solid rgba(122, 104, 80, .34);
  border-radius: 9px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 247, 224, .5), 0 2px 5px rgba(58, 46, 34, .16);
  transition: transform .1s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.pad-key:hover {
  color: var(--parchment);
  background: linear-gradient(180deg, var(--oxblood-bright), var(--oxblood));
  border-color: var(--oxblood);
}
.pad-key:active { transform: translateY(1px) scale(.96); }
.pad-key.exhausted {
  color: var(--ink-light);
  opacity: .42;
  background: var(--parchment-deep);
  box-shadow: none;
}
.pad-key.pad-erase {
  color: var(--ink-light);
  font-size: clamp(15px, 3.6vw, 21px);
}
.pad-key.pad-erase:hover {
  color: var(--parchment);
  background: linear-gradient(180deg, #6b5a48, #3a2e22);
  border-color: #3a2e22;
}

/* The seal "win" treatment, mirroring the sibling games. */
.seal-face { line-height: 1; transition: transform .3s var(--ease); }
.seal.win { background: radial-gradient(circle at 38% 32%, var(--gold-bright), var(--gold) 55%, var(--gold-deep) 100%); }
.seal:active .seal-face { transform: rotate(180deg); }

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