*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071018;color:#fff;font-family:system-ui;touch-action:none}canvas{width:100%;height:100%;display:block;background:#101820}header{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));font-size:11px;background:#07131ddd;border:1px solid #557586;border-radius:8px;padding:8px}header button{float:right;background:#173241;color:#fff;border:1px solid #7893a1;border-radius:7px;padding:5px}#state{margin-left:8px;color:#87e8ff;font-weight:900}#status{position:absolute;top:52px;left:50%;transform:translateX(-50%);font-size:10px;background:#07131ddd;padding:5px 8px;border-radius:6px}#move{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:112px;height:112px;border:2px solid #7893a1;border-radius:50%;background:#102536bb}#move i{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:#86d5e9}#move small{position:absolute;top:118px;width:100%;text-align:center}#look{position:absolute;right:max(14px,env(safe-area-inset-right));top:70px;bottom:max(14px,env(safe-area-inset-bottom));width:43%;border:1px dashed #7893a166;border-radius:14px;text-align:right;padding:8px;font-size:10px;color:#a7bdc8}#run,#crouch,#attack{position:absolute;z-index:6;border-radius:14px;border:1px solid #7893a1;color:#fff;font-weight:900;touch-action:none}#run,#crouch{bottom:max(22px,env(safe-area-inset-bottom));width:74px;height:48px;background:#173241dd}#run{right:118px}#crouch{right:34px}#attack{right:34px;bottom:max(82px,env(safe-area-inset-bottom));width:112px;height:58px;background:#7d2432dd;border-color:#c86b70}#run.on{background:#206b78}#crouch.on{background:#7a6330}#attack.on{background:#c64150;transform:scale(.96)}#rotate{display:none}@media(orientation:portrait){canvas,header,#status,#move,#look,#run,#crouch,#attack{visibility:hidden}#rotate{display:grid;position:absolute;inset:0;place-items:center;background:#071018;font-weight:900}}

#enemyState{margin-left:8px;color:#ffd27a;font-weight:900}