:root{font-family:system-ui;color:#edf2e8;background:#10201c}body{margin:0;padding:20px}main{max-width:520px;margin:auto}h1{font-size:clamp(22px,5vw,32px)}button,select{font:inherit;padding:10px;border:1px solid #7b927e;border-radius:7px;background:#233d33;color:inherit;cursor:pointer}#board{display:grid;grid-template-columns:repeat(4,1fr);max-width:360px;margin:20px auto;border:3px solid #93aa91}#board input{box-sizing:border-box;width:100%;aspect-ratio:1;border:1px solid #789078;border-radius:0;text-align:center;font-size:32px;background:#eff2e3;color:#14231a;min-width:0}#board input:nth-child(4n+2){border-right:3px solid #567359}#board input:nth-child(n+5):nth-child(-n+8){border-bottom:3px solid #567359}#board input:read-only{background:#d4e0c7;font-weight:bold}#board input:focus{outline:3px solid #e78f57;outline-offset:-3px}#status{min-height:40px}button:focus-visible{outline:3px solid orange}