html,body{margin:0;padding:0;width:100%;height:100%;height:100dvh;position:fixed;top:0;left:0;overflow:hidden}body{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#2c2c2c;font-family:Arial,sans-serif;user-select:none;-webkit-user-select:none}.canvas-container{width:90vw;max-width:880px;aspect-ratio:18 / 9;background-color:#000;border-radius:8px;overflow:hidden;box-shadow:0 0 25px #0009}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}#controls{margin-top:20px;padding:10px 15px;background-color:#3d3d3d;border-radius:8px;box-shadow:0 4px 8px #0006}button{padding:12px 22px;font-size:16px;color:#fff;background-color:#789;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}button:hover{background-color:#8c9ba8}.canvas-container{position:relative}#orientation-prompt{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#1a1a1a;color:#fff;z-index:9999;justify-content:center;align-items:center;text-align:center;font-family:Arial,sans-serif}.prompt-content{padding:20px}.prompt-icon{font-size:48px;margin-bottom:15px;animation:rotate-device 2s ease-in-out infinite}@keyframes rotate-device{0%{transform:rotate(0)}50%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media (max-width: 900px) and (orientation: portrait){#orientation-prompt{display:flex}body{overflow:hidden}}#touch-controls{display:none;position:absolute;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:0;right:0;justify-content:space-between;padding:0 calc(16px + env(safe-area-inset-right,0px)) 0 calc(16px + env(safe-area-inset-left,0px));pointer-events:none;z-index:10}body.touch-device #touch-controls{display:flex}.control-group{display:flex;gap:12px;pointer-events:none}.touch-btn{width:52px;height:52px;background-color:#2c2c2c99;border:3px solid rgba(255,255,255,.45);color:#ffffffd9;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:manipulation;border-radius:8px;box-shadow:0 3px #0000004d;transition:transform .05s,background-color .1s;font-family:inherit;padding:0;cursor:pointer}.touch-btn:active{transform:translateY(2px);box-shadow:0 1px #0000004d;background-color:#2c2c2cd9;border-color:#ffffffb3;color:#fff}.action-btn{border-radius:50%;font-size:18px}.btn-a{background-color:#b80f0a8c;border-color:#ff787880}.btn-a:active{background-color:#b80f0ad9;border-color:#ff7878b3}.btn-b{background-color:#0080808c;border-color:#64dcdc80}.btn-b:active{background-color:#008080d9;border-color:#64dcdcb3}@media (max-width: 900px) and (orientation: landscape){.canvas-container{width:100vw;max-width:200dvh;max-width:200vh;height:auto;aspect-ratio:2 / 1;border-radius:0;box-shadow:none}#controls{position:absolute;top:10px;right:10px;margin-top:0;padding:5px;background-color:#3d3d3d80;z-index:100}#controls button{padding:6px 12px;font-size:12px}}