html,body{margin:0;height:100%;background:#07101f;color:#f4efe6;font-family:"Trebuchet MS",Verdana,sans-serif;overflow:hidden;touch-action:none}
  #wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
  canvas{display:block;image-rendering:auto;background:#0b1a3a;box-shadow:0 0 40px rgba(0,0,0,.6)}
  #pad{display:none;gap:10px;padding:8px;width:100%;max-width:960px;box-sizing:border-box;justify-content:space-between;align-items:center}
  #pad .grp{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,44px);gap:6px}
  #pad button{background:#1c3f7a;color:#f4efe6;border:2px solid #3d5a8c;border-radius:10px;font:bold 18px "Trebuchet MS",sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
  #pad button.on{background:#f2c230;color:#0b1a3a}
  #pad .act{width:120px;height:94px;font-size:20px}
  #pad .back{width:70px;height:44px;font-size:14px}
  @media (pointer:coarse){#pad{display:flex}}