/* Wordwell — Manu Arcade No. XXVI
   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 play area: the illuminated grid beside its margin word list. On a phone
   the list drops below the grid. */
.play {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 3vw, 28px);
  width: min(820px, 96vw);
}

/* The framed board holds the letter grid. */
.board-frame {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
}
#board {
  display: block;
  touch-action: none;            /* we own dragging on the canvas */
  cursor: pointer;
  border-radius: 8px;
  max-width: 100%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 10px 30px rgba(26, 20, 16, .22);
  /* A faint warm vignette behind the parchment pixels. */
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(227, 183, 84, .10), rgba(227, 183, 84, 0) 60%),
    var(--parchment-deep);
}

/* Instruction caption floats over the board until the first word is found. */
.hint-overlay {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 4%, 22px);
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 86%;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 16px);
  color: var(--oxblood);
  background: rgba(246, 238, 214, .82);
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 1px 8px rgba(26, 20, 16, .18);
  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 margin: theme heading + the list of words to find. */
.margin {
  flex: 1 1 180px;
  min-width: 150px;
  max-width: 260px;
  padding-top: 4px;
}
.margin-head {
  margin: 0 0 12px;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  color: var(--oxblood);
  border-bottom: 1px solid rgba(156, 120, 38, .4);
  padding-bottom: 8px;
}

.word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px 14px;
}
.word {
  position: relative;
  font-family: var(--display);
  font-size: clamp(16px, 4vw, 19px);
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding: 2px 0;
  transition: color .35s var(--ease), opacity .35s var(--ease);
  width: fit-content;
}
/* A struck-through, pigment-tinted look once a word is found. The strike line
   wipes in from the left via a scaling pseudo-element. */
.word::after {
  content: "";
  position: absolute;
  left: 0;
  top: 52%;
  height: 2px;
  width: 100%;
  background: var(--found-pig, var(--oxblood));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease);
}
.word.found {
  color: var(--found-pig, var(--oxblood));
  opacity: .82;
}
.word.found::after {
  transform: scaleX(1);
}

/* Phone layout: list sits under the grid in a tidy two-column block. */
@media (max-width: 560px) {
  .play { flex-direction: column; align-items: center; gap: 14px; }
  .margin { max-width: min(440px, 94vw); width: min(440px, 94vw); }
  .margin-head { text-align: center; }
  .word-list { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); justify-items: center; }
  .word { text-align: center; }
}

/* Seal "won" flourish, mirroring the other arcade games. */
.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 (prefers-reduced-motion: reduce) {
  .word::after, .word, .hint-overlay { transition: none; }
}