*{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background-color:#111;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;padding:24px 16px;font-family:Courier New,Courier,monospace;display:flex}header{text-align:center}header h1{color:#fc0;letter-spacing:2px;margin-bottom:4px;font-size:1.5rem}header p{color:#888;font-size:.85rem}#game-container{touch-action:manipulation;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:448px;display:flex}canvas{image-rendering:pixelated;touch-action:none;-webkit-user-select:none;user-select:none;background-color:#000;border:2px solid #333;max-width:100%;height:auto}.virtual-controls{touch-action:none;background:#12121cd9;border:1px solid #2a2a3e;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:12px 18px;display:flex;box-shadow:inset 0 0 12px #0009,0 4px 10px #00000080}.dpad-container{touch-action:none;flex-direction:column;justify-content:center;align-items:center;display:flex}.dpad-middle{flex-direction:row;justify-content:center;align-items:center;display:flex}.dpad-btn{color:#fc0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#181824;border:2px solid #44445a;border-radius:6px;justify-content:center;align-items:center;width:46px;height:46px;font-family:inherit;font-size:1.15rem;transition:background .1s,border-color .1s,transform 80ms,box-shadow .1s;display:flex;box-shadow:0 3px 6px #0006}.dpad-btn:hover{color:#fff;border-color:#fc0}.dpad-btn:active,.dpad-btn.active{color:#111;background:#fc0;border-color:#fc0;transform:scale(.92);box-shadow:0 0 12px #ffcc00b3}.dpad-center{background:#101018;border:1px solid #222232;width:46px;height:46px}.action-buttons{flex-direction:column;gap:12px;display:flex}.action-btn{color:#00d2ff;letter-spacing:1px;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#181824;border:2px solid #2d4560;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-family:inherit;font-size:.82rem;font-weight:700;transition:background .1s,border-color .1s,transform 80ms,box-shadow .1s;display:flex;box-shadow:0 3px 6px #0006}.action-btn:hover{color:#fff;border-color:#00d2ff}.action-btn:active{color:#111;background:#00d2ff;border-color:#00d2ff;transform:scale(.94);box-shadow:0 0 12px #00d2ffb3}.btn-icon{font-size:.95rem}.btn-label{font-size:.8rem}@media (width<=480px){body{gap:12px;padding:16px 8px}.virtual-controls{padding:10px 12px}.dpad-btn{width:42px;height:42px;font-size:1rem}.dpad-center{width:42px;height:42px}.action-btn{padding:8px 14px;font-size:.75rem}}.controls-hint{color:#666;text-align:center;font-size:.75rem}footer{color:#888;text-align:center;flex-direction:column;align-items:center;gap:8px;margin-top:8px;font-size:.85rem;display:flex}.footer-links{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.footer-copyright{color:#777;font-size:.8rem}footer a{color:#00d2ff;text-decoration:none;transition:color .15s ease-in-out}footer a:hover{color:#fc0;text-decoration:underline}.separator{color:#444}