body{margin:0;padding:0;font-family:"Press Start 2P",monospace,Arial,sans-serif;background-color:#000;color:#fff;overflow:hidden}.pong-game{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;box-sizing:border-box}h1{font-size:3rem;margin-bottom:20px;text-align:center;letter-spacing:4px}.game-canvas{border:2px solid #fff;background-color:#000;max-width:100%;height:auto;margin:0 auto;display:block;touch-action:none}.game-settings{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:20px;width:100%;max-width:800px}.setting{display:flex;flex-direction:column;align-items:center;margin:0 10px}.setting label{margin-bottom:5px;font-size:.9rem}.setting select,.setting button{background-color:#000;color:#fff;border:2px solid #fff;padding:8px 12px;font-family:inherit;cursor:pointer;min-width:120px;text-align:center}.setting select:hover,.setting button:hover{background-color:#333}.setting select:focus,.setting button:focus{outline:none;box-shadow:0 0 0 2px #ffffff80}.game-start{margin:20px 0}.game-start button{background-color:#000;color:#fff;border:2px solid #fff;padding:12px 24px;font-size:1.2rem;font-family:inherit;cursor:pointer;letter-spacing:2px;transition:all .2s}.game-start button:hover{background-color:#fff;color:#000}.game-instructions{margin-top:20px;text-align:center;max-width:800px}.game-instructions h2{font-size:1.5rem;margin-bottom:10px}.game-instructions p{margin:5px 0;font-size:.9rem}@media (max-width: 850px){.game-canvas{width:100%;height:auto}h1{font-size:2rem}.game-settings{flex-direction:column;align-items:center}.setting{margin:5px 0}}@media (max-width: 850px) and (orientation: landscape){.pong-game{padding:10px}h1{font-size:1.5rem;margin-bottom:10px}.game-settings{flex-direction:row;margin-bottom:10px}.setting{margin:0 5px}.setting label{font-size:.7rem}.setting select,.setting button{padding:5px 8px;min-width:100px;font-size:.8rem}.game-instructions{display:none}.game-start button{padding:8px 16px;font-size:1rem}}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}h1{animation:pulse 2s infinite}:root{font-family:"Press Start 2P",monospace,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;touch-action:none}#root{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (max-width: 768px) and (orientation: portrait){body:after{content:"Please rotate your device to landscape mode for the best experience";position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:9999;font-size:1.2rem}}body{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}body{overscroll-behavior-y:contain}*{touch-action:manipulation}