: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}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 20px #0000001a;border-bottom:1px solid rgba(255,255,255,.2)}.app-header h1{color:#4a5568;font-size:2rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.1)}.session-info{display:flex;align-items:center;gap:1rem;color:#666;font-weight:500}.leave-btn{background:#e53e3e;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.leave-btn:hover{background:#c53030;transform:translateY(-2px);box-shadow:0 4px 12px #e53e3e4d}.app-main{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem}.connection-status{text-align:center;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:3rem;border-radius:16px;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2)}.connection-status h2{color:#4a5568;margin-bottom:1rem;font-size:1.5rem}.connection-status p{color:#666;font-size:1rem}.error-message{position:fixed;top:80px;right:2rem;background:#fed7d7;color:#c53030;padding:1rem 1.5rem;border-radius:8px;border-left:4px solid #e53e3e;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;gap:1rem;max-width:400px;z-index:1000;animation:slideIn .3s ease}.error-message button{background:none;border:none;color:#c53030;font-size:1.2rem;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s ease}.error-message button:hover{background:#c530301a}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.app-header{padding:1rem;flex-direction:column;gap:1rem}.app-header h1{font-size:1.5rem}.session-info{flex-direction:column;gap:.5rem;text-align:center}.app-main{padding:1rem}.error-message{right:1rem;left:1rem;max-width:none}}.landing-page{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);width:100%;max-width:600px;margin:0 auto}.player-section{margin-bottom:2rem;text-align:center}.player-section h2{color:#4a5568;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.player-name-input{width:100%;padding:1rem;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:all .2s ease;background:#fffc}.player-name-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;background:#fff}.tabs{display:flex;border-bottom:2px solid #e2e8f0;margin-bottom:2rem;gap:4px}.tab{flex:1;padding:1rem;border:none;background:transparent;color:#666;font-weight:500;cursor:pointer;transition:all .2s ease;border-radius:8px 8px 0 0;position:relative}.tab:hover{background:#667eea1a;color:#4a5568}.tab.active{background:#667eea;color:#fff;box-shadow:0 -2px 8px #667eea33}.tab.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#667eea}.tab-content{animation:fadeIn .3s ease}.tab-content h3{color:#4a5568;margin-bottom:1.5rem;font-size:1.25rem;font-weight:600;text-align:center}.form{display:flex;flex-direction:column;gap:1.5rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{color:#4a5568;font-weight:500;font-size:.875rem}.input-group input{padding:.75rem;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:all .2s ease;background:#fffc}.input-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;background:#fff}.action-btn{padding:1rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:.5rem}.create-btn{background:#48bb78;color:#fff}.create-btn:hover:not(:disabled){background:#38a169;transform:translateY(-2px);box-shadow:0 4px 12px #48bb784d}.join-btn{background:#667eea;color:#fff}.join-btn:hover:not(:disabled){background:#5a67d8;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.sessions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.refresh-btn{background:#ed8936;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.refresh-btn:hover{background:#dd6b20;transform:translateY(-2px);box-shadow:0 4px 12px #ed89364d}.no-sessions{text-align:center;color:#666;padding:3rem 2rem}.no-sessions p{margin-bottom:.5rem}.sessions-list{display:flex;flex-direction:column;gap:1rem;max-height:400px;overflow-y:auto}.session-item{display:flex;justify-content:space-between;align-items:center;background:#ffffffb3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:1rem;transition:all .2s ease}.session-item:hover{background:#ffffffe6;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.session-info{flex:1}.session-header{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}.session-id{font-weight:700;color:#4a5568;font-size:1.1rem}.session-status{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.session-status.waiting{background:#fed7d7;color:#c53030}.session-status.playing{background:#c6f6d5;color:#2f855a}.session-details{display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;color:#666}.password-indicator{margin-top:.5rem;color:#ed8936;font-size:.875rem;font-weight:500}.join-session-btn{background:#667eea;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease;min-width:80px}.join-session-btn:hover:not(:disabled){background:#5a67d8;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.join-session-btn:disabled{background:#a0aec0;cursor:not-allowed;transform:none}.password-modal{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 8px 32px #0003;width:90%;max-width:400px;text-align:center}.modal-content h3{color:#4a5568;margin-bottom:1rem;font-size:1.25rem}.modal-content p{color:#666;margin-bottom:1.5rem}.password-input{width:100%;padding:.75rem;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;margin-bottom:1.5rem;transition:all .2s ease}.password-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.modal-buttons{display:flex;gap:1rem;justify-content:center}.modal-buttons .join-btn{background:#667eea;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.modal-buttons .join-btn:hover{background:#5a67d8;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.cancel-btn{background:#a0aec0;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.cancel-btn:hover{background:#718096;transform:translateY(-2px);box-shadow:0 4px 12px #a0aec04d}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.landing-page{padding:1.5rem;max-width:90%}.tabs{flex-direction:column;border-bottom:none}.tab{border-radius:8px;margin-bottom:4px}.tab.active:after{display:none}.session-item{flex-direction:column;gap:1rem}.session-details{text-align:center}.join-session-btn{align-self:center;min-width:120px}.modal-buttons{flex-direction:column}}.chat-container{position:fixed;bottom:20px;right:20px;width:350px;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;box-shadow:0 8px 32px #0003;border:1px solid rgba(255,255,255,.3);z-index:1000;transition:all .3s ease;overflow:hidden}.chat-container.collapsed{height:60px}.chat-container.expanded{height:400px}.chat-header{padding:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;-webkit-user-select:none;user-select:none}.chat-header:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1)}.chat-title{font-weight:600;font-size:1rem}.chat-toggle{font-weight:700;font-size:1.25rem;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff3;transition:all .2s ease}.chat-toggle:hover{background:#ffffff4d;transform:scale(1.1)}.chat-body{display:flex;flex-direction:column;height:340px}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;max-height:280px}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:#667eea99;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#667eeacc}.no-messages{text-align:center;color:#999;padding:2rem 1rem;font-style:italic}.no-messages p{margin:.5rem 0}.chat-message{animation:messageSlide .3s ease}.chat-message.own-message{align-self:flex-end;max-width:80%}.chat-message.other-message{align-self:flex-start;max-width:80%}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem;font-size:.75rem}.player-name{font-weight:600;text-transform:uppercase;letter-spacing:.5px}.player-name.x{color:#e53e3e}.player-name.o{color:#3182ce}.message-time{color:#666;font-size:.7rem}.message-content{background:#667eea1a;padding:.75rem;border-radius:12px;border:1px solid rgba(102,126,234,.2);word-wrap:break-word;line-height:1.4;position:relative}.own-message .message-content{background:#48bb781a;border-color:#48bb7833}.own-message .message-content:after{content:"";position:absolute;bottom:-6px;right:12px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(72,187,120,.1)}.other-message .message-content:after{content:"";position:absolute;bottom:-6px;left:12px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(102,126,234,.1)}.chat-input-form{display:flex;padding:1rem;gap:.75rem;border-top:1px solid rgba(0,0,0,.1);background:#fffc}.chat-input{flex:1;padding:.75rem;border:2px solid rgba(102,126,234,.2);border-radius:8px;font-size:.875rem;transition:all .2s ease;background:#ffffffe6}.chat-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;background:#fff}.chat-input:disabled{background:#0000000d;color:#999;cursor:not-allowed}.send-button{padding:.75rem;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:1rem;min-width:50px;display:flex;align-items:center;justify-content:center}.send-button:hover:not(:disabled){background:#5a67d8;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.send-button:disabled{background:#a0aec0;cursor:not-allowed;transform:none}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.chat-container{right:10px;bottom:10px;width:300px}.chat-container.expanded{height:350px}.chat-body{height:290px}.chat-messages{max-height:230px}}@media (max-width: 480px){.chat-container{right:5px;bottom:5px;width:280px;left:5px}.chat-container.expanded{height:300px}.chat-body{height:240px}.chat-messages{max-height:180px;padding:.75rem}.chat-message{max-width:90%}}.game-board{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);width:100%;max-width:600px;margin:0 auto}.game-header{margin-bottom:2rem}.players-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem}.player-card{flex:1;background:#ffffffb3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid;border-radius:12px;padding:1rem;text-align:center;transition:all .3s ease;position:relative;overflow:hidden}.player-card.x-player{border-color:#e53e3e;background:linear-gradient(135deg,#e53e3e1a,#ffffffb3)}.player-card.o-player{border-color:#3182ce;background:linear-gradient(135deg,#3182ce1a,#ffffffb3)}.player-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s ease}.player-card:hover:before{left:100%}.player-name{display:block;font-weight:700;color:#4a5568;font-size:.875rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.player-status{display:block;font-size:1rem;color:#666;font-weight:500}.vs-divider{font-weight:900;font-size:1.25rem;color:#a0aec0;text-shadow:0 2px 4px rgba(0,0,0,.1);flex-shrink:0}.game-status{text-align:center}.game-status h2{color:#4a5568;font-size:1.5rem;font-weight:600;margin:0;padding:1rem;background:#ffffff80;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)}.board-container{display:flex;justify-content:center;margin-bottom:2rem}.board{display:grid;grid-template-rows:repeat(3,1fr);gap:8px;padding:1rem;background:#ffffff80;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid rgba(255,255,255,.3);box-shadow:inset 0 2px 8px #0000001a}.board-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.game-cell{width:80px;height:80px;border:2px solid #e2e8f0;border-radius:12px;background:#ffffffe6;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-cell.empty{background:#fff9}.game-cell.filled{background:#ffffffe6;cursor:not-allowed}.game-cell.clickable:hover{background:#667eea1a;border-color:#667eea;transform:scale(1.05);box-shadow:0 4px 12px #667eea4d}.game-cell.clickable:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#667eea33;border-radius:50%;transform:translate(-50%,-50%);transition:all .2s ease}.game-cell.clickable:hover:before{width:100%;height:100%}.game-cell:disabled{cursor:not-allowed;opacity:.7}.symbol{z-index:1;position:relative;animation:symbolAppear .3s ease;text-shadow:0 2px 4px rgba(0,0,0,.1)}.symbol.x{color:#e53e3e}.symbol.o{color:#3182ce}.game-actions{display:flex;justify-content:center;margin-bottom:2rem}.restart-btn{background:#48bb78;color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #48bb784d}.restart-btn:hover{background:#38a169;transform:translateY(-2px);box-shadow:0 6px 16px #48bb7866}.game-info{border-top:1px solid rgba(255,255,255,.3);padding-top:1.5rem;margin-top:1.5rem}.session-details{background:#ffffff80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:8px;padding:1rem;margin-bottom:1rem;border:1px solid rgba(255,255,255,.3)}.session-details p{margin:.25rem 0;color:#666;font-size:.875rem}.session-details strong{color:#4a5568}.invite-info{background:#667eea1a;border:1px solid rgba(102,126,234,.2);border-radius:8px;padding:1rem;text-align:center}.invite-info h3{color:#4a5568;margin-bottom:.5rem;font-size:1rem;font-weight:600}.invite-info p{color:#666;margin:.25rem 0;font-size:.875rem}.invite-info strong{color:#667eea;font-weight:700;padding:.25rem .5rem;background:#fffc;border-radius:4px;font-family:Courier New,monospace}.waiting-modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.waiting-content{background:linear-gradient(135deg,#fffffff2,#ffffffe6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:3rem;text-align:center;box-shadow:0 20px 40px #0003;border:1px solid rgba(255,255,255,.3);max-width:500px;width:90%;position:relative;overflow:hidden}.waiting-content:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(102,126,234,.1),transparent);animation:rotate 4s linear infinite;z-index:-1}.waiting-spinner{margin-bottom:2rem;display:flex;justify-content:center}.spinner{width:60px;height:60px;border:4px solid rgba(102,126,234,.2);border-left:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.waiting-content h2{color:#4a5568;margin-bottom:1rem;font-size:1.75rem;font-weight:700}.waiting-content p{color:#666;margin-bottom:2rem;font-size:1rem}.session-share{background:#fff9;border-radius:12px;padding:1.5rem;margin-bottom:2rem;border:1px solid rgba(255,255,255,.4)}.share-item{margin-bottom:1rem}.share-item:last-child{margin-bottom:0}.share-item label{display:block;color:#4a5568;font-weight:600;margin-bottom:.5rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.session-id-display,.password-display{display:flex;align-items:center;gap:.75rem;justify-content:center}.session-id-display span,.password-display span{background:#667eea1a;color:#667eea;padding:.75rem 1rem;border-radius:8px;font-family:Courier New,monospace;font-weight:700;font-size:1.1rem;border:2px solid rgba(102,126,234,.2);min-width:100px}.copy-btn{background:#667eea;color:#fff;border:none;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:1rem;min-width:50px;height:50px;display:flex;align-items:center;justify-content:center}.copy-btn:hover{background:#5a67d8;transform:scale(1.05);box-shadow:0 4px 12px #667eea4d}.waiting-hint{color:#48bb78;font-weight:600;font-size:.875rem;margin:0;background:#48bb781a;padding:1rem;border-radius:8px;border:1px solid rgba(72,187,120,.2)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes symbolAppear{0%{opacity:0;transform:scale(.5) rotate(180deg)}to{opacity:1;transform:scale(1) rotate(0)}}@media (max-width: 768px){.game-board{padding:1.5rem;max-width:90%}.players-info{flex-direction:column;gap:1rem}.vs-divider{transform:rotate(90deg);margin:.5rem 0}.player-card{max-width:200px;margin:0 auto}.game-cell{width:60px;height:60px;font-size:1.5rem}.board{padding:.75rem}.game-status h2{font-size:1.25rem;padding:.75rem}}@media (max-width: 480px){.game-cell{width:50px;height:50px;font-size:1.25rem}.board{gap:6px;padding:.5rem}.board-row{gap:6px}}