#control-hints{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
#control-hints[hidden],.control-hint[hidden]{display:none!important}
.control-hint{position:absolute;transform:translate(-50%,-50%);text-align:center;color:#fff;transition:left .22s ease,top .22s ease;opacity:0}
.control-hint-player{display:block;margin:0 0 7px;font:800 clamp(10px,.85vw,12px) var(--font-game);letter-spacing:.16em;text-shadow:0 2px 3px #000}
.control-hint-keys{display:grid;grid-template-columns:repeat(3,clamp(28px,4.5vmin,48px));grid-template-rows:repeat(2,clamp(28px,4.5vmin,48px));gap:3px}
.control-hint-keys kbd{display:grid;place-items:center;box-sizing:border-box;margin:0;padding:0;border:2px solid #ffffffb3;border-radius:0;background:linear-gradient(#ffffff14,#ffffff14),#0008;color:#fff;font:800 clamp(16px,2.2vmin,24px)/1 var(--font-game);text-shadow:0 1px 2px #000}
.control-hint-keys kbd.is-pressed{border-color:#ffffffd9;background:linear-gradient(#ffffff38,#ffffff38),#0008}
.control-hint-keys kbd:first-child{grid-column:2}
.control-hint-keys kbd:nth-child(2){grid-column:1;grid-row:2}
.control-hint-keys kbd:nth-child(3){grid-column:2;grid-row:2}
.control-hint-keys kbd:nth-child(4){grid-column:3;grid-row:2}
@media(prefers-reduced-motion:reduce){.control-hint{transition:none}}