.tetris{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.tetris-stage{width:min(300px,46vw);flex:0 0 auto}
.tetris-stage canvas{width:100%;height:auto;display:block}
.side{display:flex;flex-direction:column;gap:10px;width:104px;flex:0 0 auto}
.side-card{
  background:linear-gradient(180deg,#131b26,#0f151d);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;text-align:center;
}
.side-card .cap{display:block;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.side-card #next{width:96px;height:96px;margin:0 auto;display:block;image-rendering:auto}
.side-card .best{font-size:22px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.4}
.side-card.keys{text-align:left;font-size:10.5px;color:var(--muted);line-height:2}
.side-card.keys span:not(.cap){display:block;white-space:nowrap}
.side-card.keys kbd{
  font-family:inherit;border:1px solid var(--line);border-radius:4px;
  padding:0 4px;margin-right:2px;color:var(--text);font-size:10px;
}

@media (max-width:560px){
  .tetris{gap:10px}
  .tetris-stage{width:min(260px, 56vw)}
  .side{width:88px}
  .side-card{padding:8px}
  .side-card #next{width:80px;height:80px}
  .side-card.keys{display:none}
}
@media (max-height:700px) and (max-width:560px){
  .tetris-stage{width:min(230px, 44vw)}
}