/* [KEYCAPS] page legend under the canvas (flow.js pageHelp). High contrast, wraps on small windows. */
.kc-wrap{max-width:1000px;margin:6px auto;display:flex;flex-direction:column;gap:4px;align-items:center;font:600 13px "Segoe UI",Roboto,Arial,sans-serif;color:#fff}
.kc-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;align-items:center}
.kc-title{font-weight:800;color:#ffd070;margin-right:2px}
.kc-grp{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.kc-grp kbd{display:inline-block;min-width:1.3em;padding:1px 5px;border-radius:4px;background:#eef0f6;color:#101018;font:700 12px "Segoe UI",Roboto,Arial,sans-serif;border-bottom:3px solid var(--k,#8fd8ff);text-align:center}
.kc-plus{color:#fff;padding:0 1px}.kc-word{margin-left:4px;color:#e8e8f0}
.kc-move{--k:#5ad0ff}.kc-punch{--k:#ff6a5a}.kc-kick{--k:#ffb02a}.kc-jump{--k:#7dff7a}.kc-block{--k:#c08bff}.kc-special{--k:#ff5ad0}.kc-ult{--k:#ffe66a}.kc-pause{--k:#aab4c8}.kc-menu{--k:#8fd8ff}.kc-tab{--k:#ffcf7a}
@media (max-width:640px){.kc-wrap{font-size:11px}.kc-grp kbd{font-size:10px;padding:0 3px}}
/* [INTRO] trailer overlay: letterboxed over the whole window, never captures layout */
.intro-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:contain;background:#07040e;z-index:50}
.intro-hint{position:fixed;left:0;right:0;bottom:14px;z-index:51;text-align:center;font:700 14px "Segoe UI",Roboto,Arial,sans-serif;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
/* [REVIEW2 P1] the page must fit the viewport: the in-canvas keycap strip already shows the controls, so the long DOM legend is
   hidden on short viewports (1280x720, 844x390 ...) and on touch devices; nothing scrolls. */
@media (max-height:820px),(pointer:coarse){#keys{display:none}html,body{overflow:hidden}body{min-height:0}}
body.touch #keys{display:none}
@media (orientation:portrait) and (max-width:700px){body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100dvh;overflow:hidden}}
/* [TOUCH] title/pause/result menus are tapped directly on the canvas, so the game's #tc pad would only cover them */
body[data-scene=title] #tc,body[data-scene=paused] #tc,body[data-scene=over] #tc,body[data-scene=clear] #tc{display:none!important}