html,body{margin:0;background:#050607;color:#fff;height:100%;overflow:hidden;font-family:Arial,"Noto Sans KR",sans-serif}
body{display:grid;place-items:center}
#shell{width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#15171c,#050607 75%)}
canvas{display:block;max-width:100vw;max-height:100vh;width:auto;height:auto;box-shadow:0 0 50px #000;image-rendering:auto}
/* MORE THAN MOBILE TOUCH CONTROLS */
.mobile-controls{display:none;position:fixed;left:0;right:0;bottom:max(8px,env(safe-area-inset-bottom));z-index:30;padding:0 14px;justify-content:space-between;align-items:end;pointer-events:none}.mobile-controls button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid #ffffff55;background:#10151dde;color:#fff;font-weight:900;box-shadow:0 6px 18px #0009}.dpad{width:164px;height:164px;position:relative}.dpad button{position:absolute;width:58px;height:58px;border-radius:18px;font-size:23px}.dpad .up{left:53px;top:0}.dpad .left{left:0;top:53px}.dpad .down{left:53px;top:106px}.dpad .right{left:106px;top:53px}.actions{display:grid;grid-template-columns:repeat(3,70px);gap:8px;align-items:end}.actions button{height:62px;border-radius:16px;font-size:14px}.actions .primary{background:#d5a43fe8;color:#15100a}.actions small{font-size:9px;opacity:.8}.mobile-controls button.is-pressed{transform:scale(.91);filter:brightness(1.28)}
@media (pointer:coarse),(max-width:900px){.mobile-controls{display:flex}canvas{width:100vw!important;height:auto!important;max-width:100vw;max-height:100vh}.actions{grid-template-columns:repeat(3,62px)}.actions button{height:56px;font-size:12px}.dpad{width:150px;height:150px}.dpad button{width:52px;height:52px}.dpad .up{left:49px}.dpad .left{top:49px}.dpad .down{left:49px;top:98px}.dpad .right{left:98px;top:49px}}
@media (max-height:560px) and (orientation:landscape){.mobile-controls{padding:0 10px;bottom:5px}.dpad{width:126px;height:126px}.dpad button{width:44px;height:44px;border-radius:13px;font-size:18px}.dpad .up{left:41px}.dpad .left{top:41px}.dpad .down{left:41px;top:82px}.dpad .right{left:82px;top:41px}.actions{grid-template-columns:repeat(5,54px);gap:5px}.actions button{height:48px;border-radius:13px;font-size:11px}}