*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;background:#000;overflow:hidden;
  font-family:"Courier New",ui-monospace,monospace;color:#fff;
  touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}

#stage{position:relative;line-height:0}
#screen{
  display:block;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  background:#5c94fc;
  box-shadow:0 0 0 2px #222,0 0 24px rgba(0,0,0,.8);
}


/* ---------- touch controls ---------- */
#touch{position:fixed;inset:0;pointer-events:none;z-index:20}
#touch.hidden{display:none}

#stick-zone{
  position:absolute;left:0;bottom:0;width:46%;height:62%;
  pointer-events:auto;touch-action:none}
#stick-base{
  position:absolute;left:12%;bottom:14%;width:132px;height:132px;border-radius:50%;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.22);
  transition:opacity .15s;opacity:.85}
#stick-knob{
  position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;background:rgba(255,255,255,.30);
  border:2px solid rgba(255,255,255,.5);will-change:transform}

#btn-zone{
  position:absolute;right:0;bottom:0;width:46%;height:62%;
  pointer-events:auto;touch-action:none}
.pad-btn{
  position:absolute;width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.30);
  color:#fff;font:bold 24px/1 "Courier New",monospace;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  touch-action:none}
.pad-btn span{font:400 10px/1 "Courier New",monospace;opacity:.65}
.pad-btn.on{background:rgba(255,255,255,.34);transform:scale(.94)}
#btn-a{right:6%;bottom:12%}
#btn-b{right:6%;bottom:12%;margin-right:96px;margin-bottom:44px}

.sys-btn{
  position:absolute;left:10px;top:10px;
  padding:7px 20px;border-radius:14px;pointer-events:auto;
  background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.28);
  color:#fff;font:bold 12px/1 "Courier New",monospace;letter-spacing:2px}
.sys-btn.right{left:auto;right:10px;letter-spacing:1px}
.sys-btn.on{background:rgba(255,255,255,.3)}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;background:#000;display:flex;align-items:center;
  justify-content:center;z-index:50;text-align:center}
#boot.gone{display:none}
.boot-inner h1{font-size:30px;letter-spacing:3px;color:#fcd800;
  text-shadow:3px 3px 0 #d82800;line-height:1.25;margin-bottom:14px}
.boot-inner p{font-size:12px;color:#888;margin-bottom:26px}
#boot-btn{padding:14px 40px;font:bold 16px/1 "Courier New",monospace;letter-spacing:2px;
  color:#000;background:#fcd800;border:none;border-radius:6px;cursor:pointer}
#boot-btn:active{transform:scale(.96)}
.boot-inner small{display:block;margin-top:22px;color:#666;font-size:11px;line-height:1.8}

#mobile-tip{display:none}
@media (pointer:coarse){
  .boot-inner small{display:none}
  .boot-inner small#mobile-tip{display:block}
}

/* 竖屏：画面上移，把下半屏让给虚拟摇杆 */
@media (orientation:portrait){
  #app{align-items:flex-start}
  #stage{margin-top:7vh}
}
/* 横屏矮屏：按键收紧一点，避免压到画面 */
@media (orientation:landscape) and (max-height:480px){
  #stick-base{width:112px;height:112px;left:8%}
  #stick-knob{width:50px;height:50px;margin:-25px 0 0 -25px}
  .pad-btn{width:72px;height:72px;font-size:20px}
  #btn-b{margin-right:82px;margin-bottom:38px}
}