/* public/css/wwf-board.css */
.wwf-board-tool { margin: 1.5rem 0; }
.wwf-rack { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.wwf-rack-slot { width: 2.6rem; height: 2.6rem; border: 2px solid #0891b2; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem;
  text-transform: uppercase; background: #fff; }
.wwf-rack-slot--empty { border-style: dashed; color: #9ca3af; }
.wwf-board-toggle { background: none; border: 1px solid #0891b2; color: #0891b2; border-radius: 6px;
  padding: .5rem .9rem; cursor: pointer; font: inherit; margin-bottom: 1rem; }
.wwf-board-panel[hidden] { display: none; }
.wwf-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; max-width: 520px;
  aspect-ratio: 1 / 1; margin: 0 auto 1rem; }
.wwf-cell { aspect-ratio: 1 / 1; border: none; border-radius: 3px; background: #eef2f5; font-size: .6rem;
  font-weight: 700; color: #64748b; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.wwf-cell--tw { background: #d94a4a; color: #fff; }
.wwf-cell--dw { background: #e79a3c; color: #fff; }
.wwf-cell--tl { background: #2f7d3a; color: #fff; }
.wwf-cell--dl { background: #3a72b8; color: #fff; }
.wwf-cell--st { background: #0891b2; color: #fff; }
.wwf-cell--filled { background: #fef3c7; color: #1f2937; font-size: 1rem; }
.wwf-cell--active { outline: 3px solid #0891b2; outline-offset: -3px; }
.wwf-cell--hl { background: #a5f3fc; color: #0f172a; }
.wwf-keypad { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; max-width: 520px; margin: 0 auto 1rem; }
.wwf-key { padding: .55rem 0; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.wwf-key--blank { color: #0891b2; }
.wwf-key--del { color: #d94a4a; }
.wwf-moves { list-style: none; padding: 0; margin: 0; }
.wwf-move { display: grid; grid-template-columns: 1fr auto 2fr; gap: .6rem; align-items: center;
  padding: .5rem .3rem; border-bottom: 1px solid #e5e7eb; cursor: pointer; }
.wwf-move:hover, .wwf-move--active { background: #ecfeff; }
.wwf-move-word { font-weight: 700; text-transform: uppercase; }
.wwf-move-score { font-weight: 700; color: #0891b2; }
.wwf-move-where { color: #64748b; font-size: .85rem; }
.wwf-no-moves { color: #64748b; }
@media (max-width: 560px) { .wwf-cell { font-size: .5rem; } .wwf-cell--filled { font-size: .8rem; } }