:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.home-container{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to right,#1e3a8a,#9333ea);color:#fff;font-family:Segoe UI,sans-serif}.home-title{font-size:3rem;margin-bottom:40px}.home-buttons{display:flex;flex-direction:column;gap:20px}.home-buttons button{padding:15px 30px;font-size:18px;background:#fff;color:#1e3a8a;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease}.home-buttons button:hover{transform:scale(1.05);background-color:#f0f0f0}html,body,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden;font-family:Segoe UI,sans-serif;background:#f2f2f2}.game-wrapper{display:flex;height:100vh;width:100vw}.logo-section{width:40%;display:flex;justify-content:center;align-items:center;background:#fff;border-right:1px solid #ccc}.logo-img{max-width:80%;max-height:80%;object-fit:contain}.chat-section{width:60%;padding:20px;display:flex;flex-direction:column;height:100%;box-sizing:border-box;background-color:#f9f9f9;overflow:hidden}.title{margin-bottom:10px;color:#1e3a8a;font-size:24px;font-weight:700}.dropdown{margin-bottom:15px}.dropdown select{padding:8px;font-size:16px;border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#000;outline:none;cursor:pointer}.dropdown label{font-weight:500;margin-right:10px;color:#1e3a8a}.chat-box{flex-grow:1;max-height:60vh;overflow-y:auto;background:#fff;padding:10px;border:1px solid #ccc;margin-bottom:10px;border-radius:6px;display:flex;flex-direction:column}.message{margin:6px 0;padding:10px 14px;border-radius:10px;max-width:75%;font-size:15px;line-height:1.4;color:#fff}.message.user{background:#1d4ed8;align-self:flex-end;border-top-right-radius:0}.message.assistant{background:#15803d;align-self:flex-start;border-top-left-radius:0}.input-area{display:flex;gap:10px}.input-area input{flex:1;padding:10px;border:1px solid #aaa;border-radius:4px;font-size:16px}.input-area button{padding:10px 20px;background:#1e3a8a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:10;color:#000}.popup-box{background:#fff;padding:2rem;border-radius:10px;text-align:center;box-shadow:0 5px 15px #0000004d}.popup-actions button{margin:10px;padding:10px 20px;font-weight:700;border-radius:8px;cursor:pointer;background-color:#4f46e5;color:#fff;border:none;transition:background .3s}@media (max-width: 768px){.game-wrapper{flex-direction:column}.logo-section{width:100%;height:20vh;border-right:none;border-bottom:1px solid #ccc}.chat-section{width:100%;height:80vh;padding:15px}.chat-box{max-height:50vh}.input-area{margin-top:auto;flex-direction:row;gap:8px}.input-area input,.input-area button{font-size:14px}}.popup-overlay{position:fixed;top:0;left:0;height:100vh;width:100vw;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-box{background:#fff;padding:2rem 2.5rem;border-radius:12px;text-align:center;box-shadow:0 10px 25px #0003}.popup-box h2{font-size:1.8rem;margin-bottom:1rem}.popup-box p{font-size:1.2rem;margin-bottom:1.5rem}.popup-actions{display:flex;justify-content:center;gap:1rem}.popup-actions button{padding:.6rem 1.2rem;font-size:1rem;border:none;border-radius:8px;cursor:pointer;background-color:#4f46e5;color:#fff;transition:background-color .3s}.popup-actions button:hover{background-color:#4338ca}.create-room-container{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(to right,#f0f4ff,#dbeafe);font-family:Segoe UI,sans-serif;padding:20px}.create-room-box{background-color:#fff;padding:40px 30px;border-radius:16px;box-shadow:0 8px 20px #0000001a;width:100%;max-width:420px;text-align:center}.create-room-box h2{color:#1e3a8a;margin-bottom:30px;font-size:24px;font-weight:700}.create-room-box button{background-color:#2563eb;color:#fff;border:none;padding:12px 30px;font-size:16px;border-radius:8px;cursor:pointer;transition:background-color .3s}.create-room-box input{width:100%;padding:12px;margin-bottom:20px;border-radius:8px;border:1px solid #94a3b8;font-size:16px;color:#1e293b;background-color:#f8fafc}.create-room-box input::placeholder{color:#64748b}.create-room-box button:hover{background-color:#1e40af}.room-id-display{margin-top:20px;background-color:#e0f2fe;padding:16px;border-radius:8px;border:1px solid #60a5fa;word-break:break-all}.room-id-display p{margin:0;font-size:16px;font-weight:500;color:#1e3a8a}.room-id-display code{display:block;margin-top:8px;font-size:18px;font-weight:700;color:#2563eb;background-color:#f0f9ff;padding:8px 12px;border-radius:6px;border:1px dashed #60a5fa}.join-room-container{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#ede9fe,#f0f9ff);font-family:Segoe UI,sans-serif}.join-room-box{background-color:#fff;padding:40px 30px;border-radius:12px;box-shadow:0 10px 25px #0000001a;width:90%;max-width:400px;text-align:center}.join-room-box h2{color:#1e3a8a;margin-bottom:20px}.join-room-box input{width:100%;padding:12px;margin-bottom:15px;border-radius:8px;border:1px solid #ccc;font-size:16px}.join-room-box button{background-color:#1e3a8a;color:#fff;border:none;padding:12px 25px;font-size:16px;border-radius:8px;cursor:pointer;transition:background-color .3s}.join-room-box button:hover{background-color:#3746a3}.join-room-box input::placeholder{color:#64748b}.join-room-box input{background-color:#f9fafb;color:#1e293b}.single-wrapper{display:flex;height:100vh;background:#f9f9f9;padding:0rem}.logo-section{flex:1;display:flex;justify-content:center;align-items:center}.logo-img{width:60%;max-width:300px;object-fit:contain}.chat-section{flex:2;display:flex;flex-direction:column;gap:1rem}.title{font-size:2rem;font-weight:700;color:#333}.dropdown{display:flex;align-items:center;gap:1rem}.chat-box{flex:1;overflow-y:auto;border:1px solid #ddd;padding:1rem;border-radius:8px;background:#fff}.message{margin:.5rem 0;padding:.6rem 1rem;border-radius:8px;max-width:75%}.message.user{align-self:flex-end}.message.assistant{align-self:flex-start}.input-area{display:flex;gap:1rem}.input-area input{flex:1;padding:.8rem;border-radius:6px;border:1px solid #ccc}.input-area button{padding:.8rem 1.5rem;background-color:#007bff;color:#fff;border-radius:6px;border:none;cursor:pointer}.input-area button:disabled{background-color:#888;cursor:not-allowed}.start-container{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;background:linear-gradient(to right,#1e3a8a,#9333ea)}.start-card{background:#fff;padding:2rem 3rem;border-radius:20px;box-shadow:0 10px 30px #00000026;text-align:center;max-width:400px;width:90%}.start-title{font-size:2.5rem;color:#1e3a8a;margin-bottom:.5rem}.start-subtitle{font-size:1.1rem;color:#4b5563;margin-bottom:2rem}.button-group{display:flex;flex-direction:column;gap:1rem}.start-button{background-color:#4f46e5;color:#fff;padding:12px 20px;font-size:1rem;border:none;border-radius:10px;cursor:pointer;transition:background .3s}.start-button:hover{background-color:#4338ca}