.word-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;max-width:455px;margin:2px auto 18px;padding:4px}
.word-cell{aspect-ratio:1;min-width:0;border:1px solid #bfcbd8;border-radius:4px;background:#fff;color:#2c394a;display:grid;place-items:center;font-size:clamp(15px,4.4vw,23px);font-weight:850;padding:0;position:relative}
.word-cell.closed{background:transparent;border:0}.word-cell.placed{background:#f4f9ff;border-color:#9ab0d5}.word-cell.given{background:#e2f1e6;border-color:#afd1b6}
.word-cell.focus{outline:3px solid #5c89d8;outline-offset:-3px;background:#d9e8ff}.word-cell .num{position:absolute;top:1px;left:3px;font-size:8px;font-weight:600;color:#60738a}
.word-clues{display:grid;gap:6px;margin:0 auto 16px;max-width:455px}.word-clue{border:1px solid #e0e7f0;border-radius:9px;background:#fff;color:#506279;padding:10px;text-align:left;font-size:12px;line-height:1.4}.word-clue strong{color:#273850}.word-clue.active{border-color:#7da7e5;background:#ecf4ff}
.word-keyboard{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;max-width:460px;margin:0 auto}.word-keyboard button{min-height:37px;min-width:0;background:#f0f4fb;border:1px solid #ccd9e9;border-radius:7px;color:#304660;font-size:13px;font-weight:800;padding:0}
.word-keyboard button:hover{background:#dbeaff}@media(max-width:365px){.word-grid{gap:2px}.word-keyboard{gap:3px}.word-keyboard button{min-height:33px}}

.word-cell.given{background:#dcf5df;border-color:#83c99c;color:#35775c}.word-cell.given:focus-visible{outline:3px solid #4b9b74}