*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;overflow:hidden;overscroll-behavior:none;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  font-family:"Courier New",Courier,monospace;color:#fff}
#app{position:fixed;inset:0;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#screen{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;position:relative}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;touch-action:none}
#pad{flex:0 0 auto;height:min(44vh,250px);display:flex;align-items:center;justify-content:space-between;padding:8px 18px 14px}
#dpad{position:relative;width:150px;height:150px;flex:0 0 auto;touch-action:none}
#dpad .d{position:absolute;background:#2a2a2a;border:2px solid #555}
#dpad .up{left:50px;top:0;width:50px;height:55px;border-radius:8px 8px 0 0;border-bottom:none}
#dpad .down{left:50px;bottom:0;width:50px;height:55px;border-radius:0 0 8px 8px;border-top:none}
#dpad .left{top:50px;left:0;width:55px;height:50px;border-radius:8px 0 0 8px;border-right:none}
#dpad .right{top:50px;right:0;width:55px;height:50px;border-radius:0 8px 8px 0;border-left:none}
#dpad .mid{left:50px;top:50px;width:50px;height:50px;border:none;background:#2a2a2a}
#dpad .d.on{background:#f8e040;border-color:#f8e040}
#dpad .up::after,#dpad .down::after,#dpad .left::after,#dpad .right::after{content:"";position:absolute;left:50%;top:50%;
  width:0;height:0;border:9px solid transparent;transform:translate(-50%,-50%)}
#dpad .up::after{border-bottom-color:#888;margin-top:-5px}
#dpad .down::after{border-top-color:#888;margin-top:5px}
#dpad .left::after{border-right-color:#888;margin-left:-5px}
#dpad .right::after{border-left-color:#888;margin-left:5px}
#mid{display:flex;flex-direction:column;align-items:center;gap:10px}
.sbtn{padding:9px 14px;border:2px solid #777;border-radius:16px;font-weight:bold;font-size:14px;color:#ccc;background:#1a1a1a}
.sbtn.on{background:#f8e040;color:#000}
#abtns{position:relative;width:150px;height:130px;flex:0 0 auto}
.rbtn{position:absolute;width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:26px;border:3px solid #fff;touch-action:none}
#ba{right:0;top:4px;background:#d02020;border-color:#ff8080}
#bb{left:0;bottom:0;background:#203080;border-color:#8090ff}
.rbtn.on{filter:brightness(1.6);transform:scale(.94)}
/* Querformat: Tasten links und rechts neben dem Bild */
@media (orientation:landscape){
  #app{flex-direction:row}
  #screen{order:2}
  #pad{position:absolute;inset:0;height:auto;pointer-events:none;padding:0 calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left))}
  #pad>*{pointer-events:auto}
  #mid{position:absolute;right:calc(16px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top))}
  .sbtn{padding:5px 12px;font-size:12px;opacity:.8}
  #dpad,#abtns{opacity:.85}
}
@media (orientation:landscape) and (max-height:500px){
  #dpad{width:126px;height:126px;transform:scale(.84);transform-origin:left center}
  #abtns{transform:scale(.84);transform-origin:right center}
}
body.nopad #pad{display:none}