@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap";:root{--primary: #ff8c00;--secondary: #2c3e50;--accent: #ffd700;--glass: rgba(20, 20, 20, .8);--glass-border: rgba(255, 255, 255, .1)}body{margin:0;overflow:hidden;background-color:#1a1a1a;font-family:Outfit,sans-serif;color:#fff}canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:0}.hidden{display:none!important}#main-menu{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,#2c3e50,#000);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.logo-container{text-align:center;margin-bottom:3rem;animation:float 3s ease-in-out infinite}.logo-container h1{font-size:5rem;margin:0;background:linear-gradient(45deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 10px 30px rgba(255,140,0,.3);font-weight:900;letter-spacing:-2px}.subtitle{font-size:1.5rem;letter-spacing:10px;color:#ffffff80;margin-top:-10px}.menu-panel{background:var(--glass);padding:2rem;border-radius:1.5rem;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:300px;display:flex;flex-direction:column;gap:1.5rem;box-shadow:0 20px 50px #00000080}.input-group{display:flex;flex-direction:column;gap:.5rem}input[type=text]{background:#ffffff1a;border:1px solid var(--glass-border);padding:.8rem;border-radius:.5rem;color:#fff;font-family:inherit;font-size:1rem;outline:none;transition:all .3s}input[type=text]:focus{border-color:var(--primary);background:#ffffff26}.button-group{display:flex;flex-direction:column;gap:1rem}button{cursor:pointer;font-family:inherit;font-weight:700;border:none;border-radius:.5rem;padding:1rem;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.primary-btn{background:linear-gradient(45deg,var(--primary),#ff6b6b);color:#fff;box-shadow:0 5px 15px #ff8c0066}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ff8c0099}.secondary-btn{background:#ffffff1a;color:#fff;border:1px solid var(--glass-border)}.secondary-btn:hover{background:#fff3}.join-container{display:flex;gap:.5rem}.join-container input{width:100%}.icon-btn{background:transparent;color:#fff9;padding:.5rem;font-size:.9rem}.icon-btn:hover{color:#fff}#game-ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}#room-info{position:absolute;top:1rem;left:1rem;background:#00000080;padding:.5rem 1rem;border-radius:2rem;pointer-events:auto;display:flex;align-items:center;gap:.5rem;font-family:monospace}#chat-container{position:absolute;bottom:1rem;left:1rem;width:350px;pointer-events:auto}#chat-history{height:200px;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:.5rem;-webkit-mask-image:linear-gradient(to top,black 80%,transparent 100%);mask-image:linear-gradient(to top,black 80%,transparent 100%)}.chat-msg{background:#00000080;padding:.3rem .6rem;border-radius:.3rem;margin-top:.3rem;align-self:flex-start;font-size:.9rem}.chat-msg .name{color:var(--primary);font-weight:700;margin-right:.3rem}.chat-msg.system{color:#aaa;font-style:italic;background:transparent}#chat-input{width:100%;background:#0009;border:1px solid rgba(255,255,255,.2);padding:.6rem;color:#fff;border-radius:.3rem;pointer-events:auto}#controls-hint{position:absolute;bottom:1rem;right:1rem;color:#ffffff80;font-size:.8rem}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:200}.modal-content{background:#2c3e50;padding:2rem;border-radius:1rem;width:300px;border:1px solid var(--primary)}.setting-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#1a1a1a;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:300}.spinner{width:50px;height:50px;border:5px solid rgba(255,140,0,.3);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}