/* ============================================================
   Word Snake — what differs from the shared game screen
   ============================================================
   Loads after /pixelflow/assets/game.css, which supplies the
   bars, the results card, the picker, the focus pull and the
   shake. Only the word list and the board's own framing are new.
   ============================================================ */

:root{ --accent:#16a34a }

.board-wrap{position:relative;line-height:0}
canvas#board{
  display:block;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.08);
  touch-action:none;
}

/* ---------- the words to find ---------- */
/* Directly above the board, because it is read in the same glance as the
   grid: look at a word, look for it, look back. Anywhere else and that is a
   journey across the screen every few seconds. */
.wordlist{
  flex:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px;padding:0 0 11px;max-width:100%;
  transition:filter .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease;
}
.wordlist span{
  font-size:12.5px;font-weight:660;letter-spacing:.04em;
  padding:5px 10px;border-radius:2px;
  background:var(--surface);border:1px solid var(--edge);
  color:var(--txt-2);
  transition:background .25s,color .25s,border-color .25s,opacity .25s;
}
/* Struck through and faded rather than removed: a list that shrinks as you
   play loses the sense of how far you have come, and moves the words you are
   still hunting to a different place every time one is found. */
.wordlist span.got{
  background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.28);
  color:#15803d;text-decoration:line-through;text-decoration-thickness:1.5px;
  opacity:.75;
}
/* The one just found, briefly. */
@keyframes wordGot{
  0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)}
}
.wordlist span.just{animation:wordGot .42s cubic-bezier(.2,.9,.3,1.3)}

body.settling .wordlist{filter:blur(5px);opacity:.45}
@media (prefers-reduced-motion:reduce){
  body.settling .wordlist{filter:none;opacity:1}
  .wordlist span.just{animation:none}
}

@media (max-width:400px){
  .wordlist span{font-size:11.5px;padding:4px 8px}
}