* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  height:100%; background:#0a0a0f; color:#cfcfd8;
  font-family:"Courier New",Menlo,monospace;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; -webkit-user-select:none; user-select:none;
  touch-action:none; -webkit-touch-callout:none; overscroll-behavior:none;
}
#wrap { position:relative; display:flex; align-items:center; justify-content:center; }
canvas#screen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background:#000;
  box-shadow:0 0 0 3px #23232e, 0 0 40px #000a, 0 0 90px #0028;
  display:block;
}
#help { margin-top:14px; font-size:12px; letter-spacing:.5px; color:#7b7b8c; }
#help b { color:#d8d8e4; }

#touch { display:none; }
#rotate { display:none; }   /* 两种方向都能玩，不再强制旋转 */

/* ============================================================
   触屏设备：竖屏 = 画面顶部铺满宽度 + 下方摇杆
             横屏 = 画面铺满高度 + 两侧摇杆
   ============================================================ */
@media (pointer:coarse) {
  #help { display:none; }
  canvas#screen { box-shadow:0 0 0 2px #23232e; }

  #touch {
    display:block; position:fixed; inset:0;
    pointer-events:none; z-index:10;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  #stick {
    position:absolute; width:132px; height:132px;
    margin-left:-66px; margin-top:-66px;
    left:-999px; top:-999px;
    opacity:0; transition:opacity .12s;
  }
  #stick.on { opacity:1; }
  #ring {
    position:absolute; inset:0; border-radius:50%;
    background:#ffffff10; border:2px solid #ffffff28;
  }
  #knob {
    position:absolute; width:56px; height:56px; border-radius:50%;
    left:38px; top:38px;
    background:#ffffff38; border:2px solid #ffffff55;
    box-shadow:0 0 12px #0006;
  }
  #touch .btn {
    pointer-events:auto;
    display:flex; align-items:center; justify-content:center;
    background:#ffffff18; border:2px solid #ffffff32; color:#fffc;
    font-family:inherit;
  }
  #touch .btn:active, #touch .btn.hold { background:#ffffff45; border-color:#ffffff70; }
  #touch .btn.big { width:74px; height:74px; border-radius:50%; font-size:22px; font-weight:bold; }
  #touch .btn.tiny { height:30px; padding:0 12px; border-radius:15px; font-size:12px; letter-spacing:1px; }
  #touch .btn.tiny.on { background:#00a80055; border-color:#00a800; color:#b8f818; }

  /* ---------- 竖屏：画面顶部，控件在下方空白区 ---------- */
  @media (orientation:portrait) {
    body { justify-content:flex-start; padding-top:max(10px, env(safe-area-inset-top)); }
    /* 摇杆感应区 = 画面下方的左半边 */
    #stickzone { position:absolute; left:0; bottom:0; width:52%; height:52%; pointer-events:auto; }
    .acts { position:absolute; right:20px; bottom:11%; display:flex; gap:18px; align-items:flex-end; }
    #touch .btn.big[data-k=jump] { margin-bottom:40px; }
    .sys { position:absolute; right:16px; top:auto; bottom:calc(52% + 12px); display:flex; gap:10px; }
  }

  /* ---------- 横屏：画面铺满高度，控件叠在两侧 ---------- */
  @media (orientation:landscape) {
    body { justify-content:center; }
    #stickzone { position:absolute; left:0; top:0; bottom:0; width:44%; pointer-events:auto; }
    .acts { position:absolute; right:20px; bottom:22px; display:flex; gap:16px; align-items:flex-end; }
    #touch .btn.big[data-k=jump] { margin-bottom:34px; }
    .sys { position:absolute; right:20px; top:14px; display:flex; gap:10px; }
  }
}