*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;background:#05030a;overflow:hidden;overscroll-behavior:none;touch-action:none}
body{font-family:'Press Start 2P',monospace}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#game{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;
  box-shadow:0 0 0 2px #1a1030,0 0 60px #ff4fa322}

#touch{display:none;position:fixed;inset:0;pointer-events:none;z-index:10}
body.touch #touch{display:block}
#touch button{pointer-events:auto;font-family:inherit;color:#fff;border:3px solid #000;
  background:#ffffff26;box-shadow:inset 0 0 0 2px #ffffff40;touch-action:none;padding:0;
  display:flex;align-items:center;justify-content:center;opacity:.85}
#touch button.on{background:#ffcc3399;opacity:1}
.pad-l{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));width:150px;height:150px}
.dp{position:absolute;width:52px;height:52px;font-size:16px;border-radius:10px}
.dp.up{left:49px;top:0}.dp.down{left:49px;bottom:0}.dp.left{left:0;top:49px}.dp.right{right:0;top:49px}
.pad-r{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:170px;height:150px}
.ab,.bb{position:absolute;width:66px;height:66px;border-radius:50%;font-size:18px}
.ab{right:0;bottom:30px;background:#ff4fa355!important}
.bb{right:78px;bottom:4px;background:#5cc8ff44!important}
.kz{position:absolute;right:84px;top:0;width:48px;height:48px;border-radius:50%;font-size:20px;background:#ffcc3344!important}
.pause{position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(50% - 22px);width:44px;height:32px;font-size:10px;border-radius:8px}
@media (orientation:portrait){
  #wrap{align-items:flex-start;padding-top:calc(10px + env(safe-area-inset-top))}
  .pause{top:auto;bottom:calc(180px + env(safe-area-inset-bottom))}
}