html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
body { display: flex; flex-direction: column; }
main { flex: 1 1 0; min-height: 0; overflow: hidden; }
canvas { display: block; touch-action: none; }
.controls { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.7rem 0.75rem; border-top: 1px solid rgb(255 255 255 / 32%); color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(0.56rem, 1.3vw, 0.7rem); letter-spacing: 0.06em; line-height: 1.35; text-transform: uppercase; }
.control-guide { display: flex; flex: 1; align-items: center; gap: 0.8rem 1rem; min-width: 0; }
.control-label { color: rgb(255 255 255 / 62%); font-weight: 700; white-space: nowrap; }
.desktop-controls, .mobile-controls { display: flex; flex: 1; flex-wrap: wrap; gap: 0.4rem 0.65rem; margin: 0; padding: 0; list-style: none; }
.desktop-controls li, .mobile-controls li { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.desktop-controls li > span, .mobile-controls li > span { color: rgb(255 255 255 / 65%); }
.controls kbd { padding: 0.18rem 0.35rem; border: 1px solid rgb(255 255 255 / 42%); background: transparent; color: #fff; font: inherit; line-height: 1; }
.mobile-controls { display: none; }
.controls button { min-height: 2rem; padding: 0.35rem 0.6rem; border: 1px solid #fff; background: transparent; color: #fff; font: inherit; font-weight: 700; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.controls button:hover, .controls button:focus-visible { background: #fff; color: #11120d; outline: none; }
@media (max-width: 560px) {
  .controls { align-items: flex-end; }
  .control-guide { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
  .desktop-controls { display: none; }
  .mobile-controls { display: flex; max-width: 22rem; }
}