@media(max-height:690px){
  .board{width:min(calc(100vw - 105px),210px)!important}
  .classic aside{width:64px}
  .next canvas{width:52px;height:58px}
  .controls{margin-top:8px;margin-bottom:3px}
  .restart{margin-top:3px}
}
@media(max-width:340px) and (max-height:690px){.board{width:200px!important}.classic aside{width:55px}.controls button{height:48px}}
.keyboard-controls{display:grid;grid-template-columns:minmax(120px,1fr) minmax(170px,1.25fr);gap:14px;align-items:end;max-width:430px;margin:10px auto 5px}
.keyboard-controls>div>small{display:block;text-align:center;font-size:9px;color:#276d8d;margin-bottom:3px}
.space-key,.arrow-keys button{border:2px solid #fff;background:#faffff;color:#174f72;font-weight:900;box-shadow:0 5px 0 #70aebf;touch-action:none}
.space-key{width:100%;height:64px;border-radius:14px}.space-key b{display:block;font-size:16px;letter-spacing:2px}.space-key span,.arrow-keys span{display:block;font-size:8px;margin-top:3px}.arrow-keys{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,46px);gap:4px}.arrow-keys button{border-radius:10px;font-size:22px;padding:0}.key-up{grid-column:2}.key-left{grid-column:1;grid-row:2}.key-down{grid-column:2;grid-row:2}.key-right{grid-column:3;grid-row:2}.space-key:active,.arrow-keys button:active{transform:translateY(3px);box-shadow:0 2px 0 #70aebf}
@media(max-height:690px){.keyboard-controls{margin-top:6px}.space-key{height:55px}.arrow-keys{grid-template-rows:repeat(2,40px)}}