:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0a0a0a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{width:100%;height:100%;margin:0;min-width:320px;min-height:100vh;text-align:center;overflow-x:hidden}#root{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}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}.fade-in{opacity:0;transform:translateY(24px);animation:fadeUp .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}#start-page{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh}#start-page h1{font-family:Playfair Display,serif;margin:0;text-shadow:rgba(219,36,36,.5) 0px 0px 50px}#start-page h2{font-size:20px;font-weight:400;color:#646464;margin-bottom:60px}#start-page #start-container{width:30%;padding:24px 12px;background-color:#141414;border:1px solid rgb(41,41,50);border-radius:20px;box-shadow:#db24243d 0 50px 1000px 70px}#start-page hr{border-color:#000;margin:20px 0}#start-page input{width:90%;background-color:#21212c;border:.8px solid rgb(41,41,50);border-radius:10px;color:#efece7;font-family:Inter,sans-serif;font-size:16px;padding:8px 12px}#start-page #create-btn{width:95%;padding:8px 0;margin:20px 0 10px;font-size:16px;border:none;background-color:#db2424b3;transition:.1s}#start-page #join-btn{width:95%;padding:8px 0;margin:20px 0 10px;font-size:16px;border:1px solid rgba(219,36,36,.7);background-color:transparent;color:#db2424b3;transition:.1s}#start-page #create-btn:hover{translate:0px -3px}#start-page #join-btn:hover{background-color:#db2424b3;color:#efece7;translate:0px -3px}#start-page input:focus,#start-page input:focus-visible{outline:2px solid rgba(219,36,36,1)}@media(max-width:768px){#start-page #start-container{width:80%}}#start-page #banner{padding:10px 0;margin:0;position:absolute;top:4px;color:#a4a4a4;text-align:center}#start-page #credits{background-color:#f7161680;border-radius:5%;padding:4px 10px;margin:25px 0 0;font-size:16px;border:1px solid black;color:#fff}#room-page{display:flex;flex-direction:column;justify-content:start;align-items:center;gap:20px;width:40%;margin-top:10vh;padding:24px 12px;background:linear-gradient(#181818,#141414);border:1px solid rgb(41,41,50);border-radius:20px}#room-page h2{margin:10px 0;color:#c1bebe;font-family:serif;font-size:24px;background-color:#1e1d1d;padding:1px 20px;border-radius:15px;border:1px solid rgba(41,41,50,.67)}#room-page #code{color:#db2424;font-family:"";font-size:44px;margin-block-start:0;margin-block-end:0;background-color:#1e1d1d;border:1px solid rgba(41,41,50,.67);padding:10px 30px;border-radius:15px;cursor:pointer}#room-page #players{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:95%;background-color:#1e1d1d;border:1px solid rgba(41,41,50,.67);border-radius:15px;padding:15px 5px}#room-page #players h3{font-family:Inter,sans-serif;color:#c1bebe;font-weight:600;font-size:24px;margin:10px 0}#room-page #players .player{background-color:#272626;width:98%;padding:10px 0;font-size:20px;font-family:Inter,sans-serif;font-weight:600;border-radius:10px}#room-page #players .player .player-icon{position:absolute;left:45px}#room-page #notification{position:fixed;top:-40px;right:50wv;background:#4caf50;color:#fff;padding:10px 20px;border-radius:5px}#room-page button{width:98%;padding:8px 0;margin:20px 0 10px;font-size:20px;border:none;background-color:#db2424b3;transition:.1s}#room-page button:hover{translate:0px -3px}@media(max-width:968px){#room-page{width:80%}}#room-page #qr-container{background-color:#fff;padding:20px;border-radius:10px;margin:20px auto;display:inline-block;box-shadow:0 2px 10px #0000001a}#room-page #qr-toggle-btn{background-color:#4caf50;color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:5px;cursor:pointer;margin-bottom:20px;transition:background-color .3s}#room-page #qr-toggle-btn:hover{background-color:#45a049}#room-page #leave-btn{width:95%;padding:8px 0;margin:20px 0 10px;font-size:16px;border:1px solid rgba(219,36,36,.7);background-color:transparent;color:#db2424b3;transition:.1s}#room-page #leave-btn:hover{background-color:#db2424b3;color:#efece7;translate:0px -3px}.role-reveal{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh}.role-reveal .role-card{display:flex;flex-direction:column;justify-content:center;gap:10px;width:400px;height:450px;padding:10px;border:2px solid rgba(41,41,50,.67);border-radius:12px}.role-reveal .role-card h1{font-size:44px;margin:10px 0}.role-reveal .role-card .role-description{font-size:18px;color:#c1bebe}.role-reveal .role-card .role-icon{font-size:80px}.mafia{background:linear-gradient(to right bottom,#fd161633,#fd16160d);border-color:#fd16164d}.lady{background:linear-gradient(to right bottom,#c3c3,#cc33cc0d);border-color:#cc33cc4d}.doctor{background:linear-gradient(to right bottom,#33cc6b33,#33cc6b0d);border-color:#33cc6b4d}.police{background:linear-gradient(to right bottom,#3380cc33,#3380cc0d);border-color:#3380cc4d}.citizen{background:linear-gradient(to right bottom,#fff3,#ffffff0d);border-color:#ffffff4d}.role-reveal-stats{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:50px 0}#mafia-count{color:red;font-size:28px;margin:10px 0}#lady-count{color:purple;font-size:28px;margin:10px 0}@media(max-width:768px){.role-reveal .role-card{width:80%}}