html,body,#root{overflow:hidden;width:100%;height:100%;margin:0;padding:0}.app{text-align:center;display:flex;flex-direction:column;align-items:center;color:#fff;overflow:hidden;background-color:#282c34;width:100%;height:100%}.app-header{position:absolute;z-index:2;background:#00000080;padding:.5rem;top:0;left:0;right:0}.app-header h1{margin:0;font-size:1.2rem}.game-container{position:relative;display:flex;flex-direction:column;overflow:hidden;border:2px solid #666;border-radius:8px;width:400px;height:600px;margin:2rem auto}.game-container.mobile{position:fixed;overflow:hidden;display:flex;flex-direction:column;border:none;border-radius:0;width:100vw;height:100vh;margin:0;top:0;left:0}.game-area{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#111;width:100%;height:100%}.game-area canvas{display:block;object-fit:contain;width:100%!important;height:100%!important}.control-area{position:relative;height:var(--control-area-height);min-height:var(--control-area-height);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;box-sizing:border-box;background:#222;width:100%;padding:20px 20px 70px}:root{--control-area-height:min(180px,20vh)}.joystick-container{position:relative;-webkit-tap-highlight-color:transparent;touch-action:none;background:#fff3;border:2px solid #ffffff4d;border-radius:50%;width:min(100px,25vw);height:min(100px,25vw)}.joystick-knob{position:absolute;cursor:pointer;transition:transform .1s ease-out;touch-action:none;background:#fffc;border-radius:50%;width:50%;height:50%;top:25%;left:25%}.game-hud{position:absolute;color:#fff;text-align:left;z-index:1;background:#00000080;border-radius:4px;padding:5px 10px;font-size:min(1.2rem,4vw);top:10px;left:10px}canvas{touch-action:none;display:block;background:#111}.game-over{position:absolute;transform:translate(-50%,-50%);color:red;text-shadow:2px 2px 4px #00000080;font-size:48px;font-weight:700;top:50%;left:50%}.game-over-overlay{position:absolute;display:flex;justify-content:center;align-items:center;z-index:10;background:#000c;inset:0}.game-over-content{text-align:center;color:#fff;background:#000000e6;border-radius:8px;padding:2rem}.game-over-content h2{color:red;text-shadow:2px 2px 4px #00000080;margin:0 0 1rem;font-size:48px}.game-over-content p{margin:1rem 0;font-size:24px}.restart-button{color:#fff;cursor:pointer;transition:background-color .3s;background:#4caf50;border:none;border-radius:4px;margin-top:1rem;padding:1rem 2rem;font-size:1.2rem}.restart-button:hover{background:#45a049}body.mobile{position:fixed;overflow:hidden;overscroll-behavior:none;width:100%;height:100%}.mode-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:#111;min-height:100vh;padding:20px}.mode-buttons{display:flex;gap:20px;margin:20px 0}.mode-selection button{color:#fff;cursor:pointer;transition:background .2s;background:#333;border:none;border-radius:4px;padding:12px 24px;font-size:18px}.mode-selection button:hover{background:#444}.join-options{display:flex;flex-direction:column;align-items:center;gap:15px;margin-top:20px}.join-room{display:flex;gap:10px}.join-room input{color:#fff;background:#222;border:1px solid #333;border-radius:4px;padding:8px}.modal-overlay{position:fixed;display:flex;justify-content:center;align-items:center;z-index:1000;background:#000000e6;padding:20px;inset:0}.modal-content{color:#fff;text-align:center;background:#222;border-radius:8px;width:90%;max-width:400px;padding:20px}.room-id-container{display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;background:#333;border-radius:4px}.room-id-container code{display:block;word-break:break-all;color:#4caf50;background:#333;border-radius:4px;padding:10px;font-size:14px}.close-button{color:#fff;cursor:pointer;background:#666;border:none;border-radius:4px;margin-top:1rem;padding:8px 16px}.close-button:hover{background:#777}.connection-status{position:fixed;display:flex;justify-content:center;align-items:center;z-index:1000;background:#000c;inset:0}.error-message{color:#f44;margin-top:8px;font-size:14px}.join-section{display:flex;flex-direction:column;align-items:center;margin-top:20px}.join-section p{color:#666;margin:10px 0}.answer-input{display:grid;width:100%}@media (max-width:768px){.modal-content{width:90%;padding:15px}.room-id-container{display:flex;flex-direction:column;gap:10px}.room-id-container code{word-break:break-all;background:#333;border-radius:4px;padding:10px;font-size:10px}.room-id-container button{color:#fff;background:#444;border:none;border-radius:4px;padding:10px;font-size:16px}}.loading-container{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;width:30px;height:30px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}.vs-results{background:#ffffff1a;border-radius:4px;margin:1rem 0;padding:1rem}.winner-text{color:gold;text-shadow:2px 2px 4px #00000080;margin-top:1rem;font-size:28px;font-weight:700}