/* Centre the puzzle itself, with a compact horizontal number pad below it. */
.game-screen .sudoku-page{max-width:960px;margin:18px auto 45px}
.sudoku-page>.eyebrow,.sudoku-page>h1,.sudoku-page>p{text-align:center}
.sudoku-page>p{max-width:780px;margin-left:auto;margin-right:auto;line-height:1.6}
.sudoku-page .sudoku-toolbar{justify-content:center;margin:18px 0 12px;gap:10px}
.sudoku-page #puzzle-label{margin:10px auto 6px}.sudoku-page #mistake-count{margin:6px auto 14px}
.sudoku-page .sudoku-layout{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;margin:0 auto}
.sudoku-page .sudoku-grid{width:min(100%,440px);max-width:440px;margin:0 auto;flex:none}
.sudoku-page .sudoku-controls{width:min(100%,500px);min-width:0;text-align:center}
.sudoku-page .number-pad{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.sudoku-page .number-pad button{font-size:21px;min-height:45px;padding:10px 0}
.sudoku-page .sudoku-tools{justify-content:center;gap:8px;margin-top:12px}
.sudoku-page #sudoku-status{margin:14px 0 8px;min-height:1.6em;color:#694322}.sudoku-page #save-status{margin:8px 0;line-height:1.6}
.sudoku-page .about{max-width:780px;margin:26px auto 0}
@media(max-width:650px){.game-screen .sudoku-page{margin-top:18px}.sudoku-page .sudoku-toolbar{gap:8px}.sudoku-page .sudoku-grid{max-width:440px}.sudoku-page .sudoku-layout{gap:14px}.sudoku-page .number-pad{gap:4px}.sudoku-page .number-pad button{font-size:19px;min-height:43px}.sudoku-page .sudoku-tools{gap:6px}.sudoku-page .sudoku-tools button{padding:11px 10px;font-size:14px}}