/* Keep the whole playing surface within a typical laptop viewport. */
body{font-size:16px}
.masthead{padding-top:14px;padding-bottom:14px}
main{padding-top:18px}
.page-heading{margin-bottom:18px}
.page-heading h1{font-size:32px;margin-top:5px}
.eyebrow{font-size:12px;letter-spacing:1.4px}
.puzzle-topline,.selection,.tool,.primary,.secondary,.text-button,.small-primary{font-size:14px}
.level-option strong{font-size:14px}
.level-option small{font-size:12px}
.tiny{font-size:13px!important}
.save-card>p,.how-to p,.complete p{font-size:14px}
.keyboard-help,footer p{font-size:12px}
.number-button small{font-size:10px}
footer{flex-wrap:wrap;gap:16px 32px}
footer nav{font-size:14px}
@media(min-width:721px){
 .game-layout{--board-size:clamp(360px,calc(100svh - 350px),540px);grid-template-columns:minmax(0,var(--board-size)) minmax(270px,320px);gap:32px;justify-content:center}
 .play-area{width:100%}
 .puzzle-topline{font-size:13px;margin-bottom:8px}
 .puzzle-topline>div{gap:7px}
 .puzzle-topline #clue-label{font-size:12px}
 .level-label{padding:4px 7px}
 .selection{margin:6px 0 8px;font-size:12px}
 .number-pad{gap:4px}
 .number-button{min-height:48px;font-size:25px}
 .tools{margin-top:6px;gap:4px}
 .tool{padding:7px 2px;min-height:40px;font-size:12px}
 .tool>span:first-child{margin-right:2px}
 .status{margin-top:6px;padding-top:8px;font-size:14px}
 .side-card{padding:18px}
 .side-card h2{margin-bottom:12px}
 .level-option{padding-top:9px;padding-bottom:9px}
}
@media(max-width:720px){
 .masthead{padding-top:16px;padding-bottom:16px}
 main{padding-top:18px}
 .page-heading .eyebrow{font-size:11px}
 .page-heading h1{font-size:30px;max-width:none}
 .puzzle-topline{font-size:12px}
 .puzzle-topline #clue-label{font-size:11px}
 .tool{font-size:12px}
 .number-button small{font-size:10px}
 .how-to p{font-size:14px}
}