html,body{margin:0;height:100%;background:#0c0620;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);image-rendering:crisp-edges;image-rendering:pixelated;box-shadow:0 0 60px #000}

/* on-screen buttons: only on touch screens */
#touch{display:none}
body.touch #touch{display:block}
#touch .pad{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-end}
#touch .left{left:max(12px,env(safe-area-inset-left))}
#touch .right{right:max(12px,env(safe-area-inset-right))}
#touch button{width:76px;height:76px;border-radius:18px;border:3px solid #f4e3a1;background:rgba(29,18,56,.72);color:#fff;
  font:bold 16px/1.1 ui-monospace,Menlo,Consolas,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  touch-action:none;-webkit-tap-highlight-color:transparent;padding:0}
#touch button b{font-size:26px;line-height:1}
#touch button.on{background:#f4e3a1;color:#1d1238}
#touch #tJ{width:92px;height:92px;border-color:#b6ff7a}
#touch #tD{display:none}
body.flying #touch #tD{display:flex}
#touch #tP{position:fixed;top:calc(50vh - min(50vh, 28.125vw) + min(100vh, 56.25vw) * 0.115);right:calc((100vw - min(100vw, 177.78vh)) / 2 + 8px);width:auto;height:44px;padding:0 16px;flex-direction:row;font-size:16px;border-radius:12px}

/* portrait phones: ask to turn sideways */
#rotate{display:none}
@media (orientation:portrait) and (max-width:700px){
  #rotate{display:flex;position:fixed;inset:0;background:#0c0620;color:#ffe680;align-items:center;justify-content:center;text-align:center;
    font:bold 22px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:24px;z-index:5}
  #rotate p{margin:0;font-size:22px}
}

/* short screens (small phones held sideways): smaller, see-through buttons */
@media (max-height:420px){
  #touch button{width:60px;height:60px;border-radius:14px;background:rgba(29,18,56,.45);font-size:14px}
  #touch button b{font-size:20px}
  #touch #tJ{width:72px;height:72px}
  #touch .pad{gap:8px;bottom:max(6px,env(safe-area-inset-bottom))}
  #touch #tP{height:44px;font-size:14px}
}