* { 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; }
  body { justify-content:center; }
  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);
  }

  /* 左半屏为摇杆感应区（浮动摇杆：按哪出现在哪） */
  #stickzone {
    position:absolute; left:0; top:0; bottom:0; width:46%;
    pointer-events:auto;
  }
  #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;
  }

  .acts {
    position:absolute; right:22px; bottom:26px;
    display:flex; gap:16px; align-items:flex-end;
  }
  .sys {
    position:absolute; right:22px; top:16px;
    display:flex; gap:10px;
  }
  #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.big[data-k=jump] { margin-bottom:34px; }
  #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) {
    #touch { display:none; }
    #wrap { opacity:.12; }
    #rotate {
      display:flex; position:fixed; inset:0; z-index:100;
      background:#08080c; align-items:center; justify-content:center;
      text-align:center; padding:24px;
    }
    .rot-inner { max-width:320px; }
    .rot-icon {
      font-size:96px; line-height:1; color:#d82800;
      transform:rotate(0deg);
      animation:rot 1.8s ease-in-out infinite;
    }
    .rot-t1 { margin-top:22px; font-size:22px; font-weight:bold; color:#fcfcfc; letter-spacing:3px; }
    .rot-t2 { margin-top:10px; font-size:12px; color:#f8d878; letter-spacing:1.5px; }
    .rot-t3 { margin-top:18px; font-size:13px; color:#7b7b8c; line-height:1.7; }
    @keyframes rot {
      0%,20%   { transform:rotate(0deg); }
      55%,100% { transform:rotate(90deg); }
    }
  }
}