html,body{margin:0;padding:0;height:100%;background:#1b1f2e;overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;
  font-family:-apple-system,Helvetica,Arial,sans-serif;}
#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;touch-action:none}
#screen{flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:8px}
canvas#game{display:block;background:#000;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:6px;box-shadow:0 0 0 3px #2c3350,0 6px 24px #0008;touch-action:none}
#controls{flex:1 1 auto;width:100%;max-width:520px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-sizing:border-box;touch-action:none}
#dpad{position:relative;width:150px;height:150px;touch-action:none}
#dpad .d{position:absolute;background:#3a4262;box-shadow:inset 0 -4px 0 #262b42;border-radius:6px}
#dpad .up{left:50px;top:0;width:50px;height:55px}
#dpad .down{left:50px;bottom:0;width:50px;height:55px}
#dpad .left{left:0;top:50px;width:55px;height:50px}
#dpad .right{right:0;top:50px;width:55px;height:50px}
#dpad .dc{position:absolute;left:50px;top:50px;width:50px;height:50px;background:#3a4262}
#dpad .d.on{background:#5b6796}
#ab{position:relative;width:150px;height:130px}
.btn{position:absolute;width:66px;height:66px;border-radius:50%;color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;touch-action:none}
#btnA{right:0;top:8px;background:#d9475b;box-shadow:inset 0 -5px 0 #9c2c3d}
#btnB{left:6px;top:56px;background:#4f8fd6;box-shadow:inset 0 -5px 0 #2f62a0}
.btn.on{filter:brightness(1.3);transform:scale(.95)}
#mid{display:flex;flex-direction:column;align-items:center;gap:10px}
.pill{background:#2c3350;color:#b9c2e8;font-size:12px;font-weight:700;letter-spacing:1px;padding:8px 14px;border-radius:14px;box-shadow:inset 0 -3px 0 #1e2338}
.pill.on{background:#46507a}
/* landscape: game in middle, controls overlay on sides */
@media (orientation:landscape){
  #app{flex-direction:row;justify-content:center;align-items:center}
  #screen{margin:0}
  #controls{position:absolute;inset:0;max-width:none;padding:0 calc(10px + env(safe-area-inset-left)) 0 calc(10px + env(safe-area-inset-right));pointer-events:none}
  #dpad,#ab,#mid{pointer-events:auto}
  #mid{position:absolute;right:calc(24px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top))}
}