html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020617;
  font-family:Arial,"Microsoft YaHei",sans-serif;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

canvas{
  display:block;
  width:100vw;
  height:100vh;
  background:#87ceeb;
}

#rotateTip{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:linear-gradient(#020617,#111827);
}

#rotateTip .box{
  padding:30px;
  border-radius:24px;
  background:rgba(15,23,42,.9);
  border:2px solid rgba(255,255,255,.25);
}

#rotateTip .phone{
  font-size:64px;
  animation:rot 1.2s infinite alternate ease-in-out;
}

@keyframes rot{
  from{transform:rotate(0deg)}
  to{transform:rotate(90deg)}
}

.mobile-controls{
  position:fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
  display:block;
}

.left-pad{
  position:absolute;
  left:24px;
  bottom:24px;
  display:flex;
  gap:18px;
  pointer-events:auto;
}

.right-pad{
  position:absolute;
  right:20px;
  bottom:18px;
  display:grid;
  grid-template-columns:repeat(3,62px);
  grid-template-rows:repeat(3,62px);
  gap:10px;
  pointer-events:auto;
}

.btn{
  width:62px;
  height:62px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.7),rgba(255,255,255,.1) 35%,transparent 45%),
    linear-gradient(145deg,#334155,#020617);
  box-shadow:0 8px 18px rgba(0,0,0,.45), inset 0 2px 6px rgba(255,255,255,.25);
  -webkit-tap-highlight-color:transparent;
}

.btn:active{
  transform:scale(.94);
  filter:brightness(1.25);
}

.btn.attack{
  background:linear-gradient(145deg,#fb923c,#b91c1c);
}

.btn.jump{
  background:linear-gradient(145deg,#22d3ee,#0369a1);
}

.btn.skill{
  background:linear-gradient(145deg,#a855f7,#4c1d95);
}

.btn.bag{
  background:linear-gradient(145deg,#facc15,#92400e);
  color:#111827;
}

.btn.restart{
  background:linear-gradient(145deg,#94a3b8,#334155);
}

@media(pointer:coarse) and (orientation:portrait){
  #rotateTip{
    display:flex;
  }

  canvas,
  .mobile-controls{
    display:none;
  }
}

@media(pointer:coarse) and (orientation:landscape){
  #rotateTip{
    display:none;
  }

  canvas,
  .mobile-controls{
    display:block;
  }
}

@media(pointer:fine){
  .mobile-controls{
    display:none;
  }
}

@media(pointer:coarse) and (orientation:landscape) and (max-height:430px){
  .left-pad{
    left:14px;
    bottom:12px;
    gap:12px;
  }

  .right-pad{
    right:12px;
    bottom:10px;
    grid-template-columns:repeat(3,54px);
    grid-template-rows:repeat(3,54px);
    gap:8px;
  }

  .btn{
    width:54px;
    height:54px;
    font-size:17px;
  }
}