/* Mouse/trackpad desktops get a small keyboard HUD; touch layouts stay intact. */
#keyboard-drive{display:none;position:fixed;left:22px;bottom:22px;z-index:8;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px);gap:5px;pointer-events:none}
#keyboard-drive kbd{display:grid;place-items:center;border:1px solid #ffffff35;border-bottom-width:3px;border-radius:7px;background:#13212bdd;color:#dceaf0;font:600 13px/1 ui-monospace,monospace;transition:background .13s,border-color .13s,color .13s,box-shadow .13s}
#key-w{grid-column:2;grid-row:1}#key-a{grid-column:1;grid-row:2}#key-s{grid-column:2;grid-row:2}#key-d{grid-column:3;grid-row:2}
@media(hover:hover) and (pointer:fine){
  .mobile{display:none}
  #keyboard-drive{display:grid}
  .icon-button[data-shortcut]{transition:background .13s,border-color .13s,color .13s,box-shadow .13s}
  .icon-button[data-shortcut] small{display:none}
  .icon-button[data-shortcut]::after{content:'(' attr(data-shortcut) ')';display:block;margin-top:2px;font:600 10px/11px ui-monospace,monospace;letter-spacing:0;white-space:nowrap;color:#bdcbd0}
  #game-toolbar #camera-button{padding:3px!important}
  #game-toolbar #camera-button svg{width:18px;height:18px}
  body.flying #handbrake{visibility:hidden}
  #keyboard-drive kbd.key-pressed,.icon-button[data-shortcut].key-pressed,.icon-button[data-shortcut]:active{
    background:#3b4825!important;border-color:#d3ed81!important;color:#edffc7!important;box-shadow:0 0 10px #d8ff3e24,inset 0 0 0 1px #d8ff3e15
  }
  .icon-button[data-shortcut].key-pressed::after{color:#edffc7}
  body.flying .icon-button[data-shortcut].key-pressed{background:#274653!important;border-color:#91d5eb!important;box-shadow:0 0 10px #91e8ff24}
}
@media(prefers-reduced-motion:reduce){#keyboard-drive kbd,.icon-button[data-shortcut]{transition:none}}