.board { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:min(560px, 96vw); } .w { min-height:56px; padding:4px; font-weight:700; text-transform:uppercase; font-size:clamp(.65rem, 2.8vw, .95rem); background:#334155; border:2px solid transparent; border-radius:10px; } .w.on { background:#e2e8f0; color:#0b1220; }
.solved { display:flex; flex-direction:column; gap:8px; width:min(560px, 96vw); } .grp { border-radius:10px; padding:8px 12px; color:#0b1220; text-align:center; display:flex; flex-direction:column; } .grp b { text-transform:uppercase; letter-spacing:.06em; }

/* Four pastel rows keep every word legible while echoing the illustrated game board. */
.board { padding:10px; border-radius:18px; background:#f7f2e6; border:1px solid #d8cbb6; box-shadow:0 12px 27px rgba(48,53,63,.13); }
.w { color:#283341; background:#f8da87; border:1px solid #d4b662; border-bottom-width:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.w:nth-child(4n + 2) { background:#c4e9ac; border-color:#94c77e; }
.w:nth-child(4n + 3) { background:#b5d6f1; border-color:#88b8da; }
.w:nth-child(4n + 4) { background:#e7c4e9; border-color:#c997d0; }
.w.on,.w:nth-child(n).on { background:#4c7fcb; border-color:#2d60ae; color:#fff; box-shadow:0 0 0 3px #a7c5f5; }
.w:hover:not(:disabled) { filter:brightness(1.05); }