#wpw-root { position: relative; width: 100%; aspect-ratio: 16/9; background:#0b0b0b; overflow:hidden; }
#wpw-canvas { width:100%; height:100%; display:block; }

#wpw-intro { position:absolute; inset:0; display:grid; place-items:center; gap:12px; pointer-events:auto; }
#wpw-intro .card { background:#111; color:#fff; border:1px solid #2a2a2a; padding:20px 24px; border-radius:12px; max-width:560px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35); }
#wpw-intro h2 { margin:0 0 6px; font-size:22px; }
#wpw-intro p { margin:0 0 14px; opacity:.85; }
#wpw-intro button { background:#20c997; color:#04120d; border:0; padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer; }
#wpw-intro .hint { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#ddd; font-size:12px; opacity:.8; }

#wpw-hud { position:absolute; inset:0; pointer-events:none; }
#wpw-minimap { position:absolute; right:12px; top:12px; background:rgba(0,0,0,.5); color:#fff; font:12px/1.2 system-ui; padding:6px 8px; border-radius:8px; }
#wpw-tip { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:#0008; color:#fff; padding:6px 10px; border-radius:8px; font-size:12px; }

#wpw-panel { position:absolute; right:12px; top:12px; width:min(420px, 90%); max-height:85%; overflow:auto; background:#101114; color:#e5e7eb; border:1px solid #2a2f3a; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.4); padding:16px 16px 12px; }
#wpw-panel-close { position: sticky; top:0; float:right; background:#222; color:#fff; border:0; border-radius:8px; padding:6px 10px; cursor:pointer; }
#wpw-panel h3 { margin:.3rem 0 .2rem; }
#wpw-panel p { opacity:.9; }

#wpw-joystick { position:absolute; left:14px; bottom:14px; width:110px; height:110px; border-radius:999px; background:#0004; border:1px solid #2a2a2a; display:none; touch-action:none; }
#wpw-joystick .stick { position:absolute; left:50%; top:50%; width:54px; height:54px; border-radius:999px; transform:translate(-50%,-50%); background:#20c997; opacity:.85; }

@media (max-width: 900px){
  #wpw-root { aspect-ratio: 9/16; }
  #wpw-joystick { display:block; }
}