@import"https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap";:root{font-family:Inter,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}#root{width:100%;height:100%;margin:0;padding:0}.app-container{min-height:100vh;width:100%;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#1a1a1a,#2d2d2d,#1a1a1a);font-family:Courier Prime,monospace;padding:20px;position:relative}.app-container:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px);pointer-events:none;opacity:.3;z-index:1}.container{background:#1f1f1f;border:3px solid #4a4a4a;border-radius:0;padding:40px;max-width:550px;width:100%;box-shadow:0 0 50px #000c,inset 0 0 20px #00000080,0 0 0 1px #2a2a2a;position:relative;z-index:2;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:20px 20px}h1{color:#d4af37;text-align:center;margin-bottom:40px;margin-top:0;font-size:2.5em;font-family:Special Elite,cursive;text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 10px rgba(212,175,55,.3);letter-spacing:3px;text-transform:uppercase}.setup-screen,.game-screen{display:block}.form-group{margin-bottom:25px}label{display:block;margin-bottom:10px;color:#b8b8b8;font-weight:700;font-size:1.1em;text-transform:uppercase;letter-spacing:1px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}select{width:100%;padding:12px;border:2px solid #4a4a4a;border-radius:0;font-size:1.1em;background:#2a2a2a;color:#d4af37;cursor:pointer;transition:all .3s;font-family:Courier Prime,monospace;box-shadow:inset 0 2px 5px #00000080}select:focus{outline:none;border-color:#d4af37;box-shadow:inset 0 2px 5px #00000080,0 0 10px #d4af374d}input[type=text]{width:100%;padding:12px;border:2px solid #4a4a4a;border-radius:0;font-size:1.1em;background:#2a2a2a;color:#d4af37;transition:all .3s;font-family:Courier Prime,monospace;box-shadow:inset 0 2px 5px #00000080}input[type=text]:focus{outline:none;border-color:#d4af37;box-shadow:inset 0 2px 5px #00000080,0 0 10px #d4af374d}input[type=text]::placeholder{color:#666}input[type=password]{width:100%;padding:12px;border:2px solid #4a4a4a;border-radius:0;font-size:1.1em;background:#2a2a2a;color:#d4af37;transition:all .3s;font-family:Courier Prime,monospace;box-shadow:inset 0 2px 5px #00000080}input[type=password]:focus{outline:none;border-color:#d4af37;box-shadow:inset 0 2px 5px #00000080,0 0 10px #d4af374d}input[type=password]::placeholder{color:#666}button{width:100%;padding:15px;background:linear-gradient(180deg,#3a3a3a,#1a1a1a);color:#d4af37;border:2px solid #4a4a4a;border-radius:0;font-size:1.2em;font-weight:700;cursor:pointer;transition:all .3s;font-family:Courier Prime,monospace;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 10px #00000080,inset 0 1px #ffffff1a}button:hover{background:linear-gradient(180deg,#4a4a4a,#2a2a2a);border-color:#d4af37;box-shadow:0 6px 15px #000000b3,0 0 20px #d4af3733,inset 0 1px #ffffff1a;transform:translateY(-2px)}button:active{transform:translateY(0);box-shadow:0 2px 5px #00000080,inset 0 1px #ffffff1a}.player-info{text-align:center;margin-bottom:30px;padding:20px;border:1px solid #3a3a3a;background:#0000004d}.player-number{font-size:1.8em;color:#d4af37;font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.progress{color:#888;font-size:1.1em;font-family:Courier Prime,monospace}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;justify-content:center;align-items:center;z-index:1000}.modal.active{display:flex}.modal-content{background:#1f1f1f;border:3px solid #4a4a4a;border-radius:0;padding:50px;max-width:450px;width:90%;text-align:center;animation:slideIn .3s ease;box-shadow:0 0 50px #000000e6,inset 0 0 20px #00000080;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:20px 20px}@keyframes slideIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.role-title{font-size:1.8em;margin-bottom:20px;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-family:Special Elite,cursive}.role-title.word{color:#b8b8b8;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.role-title.impostor{color:#8b0000;text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 15px rgba(139,0,0,.5)}.word-display{font-size:2.5em;font-weight:800;margin:30px 0;padding:20px;border:2px solid #3a3a3a;border-radius:0;font-family:Special Elite,cursive;letter-spacing:3px;background:#0000004d;box-shadow:inset 0 0 20px #00000080}.word-display.word{color:#d4af37;text-shadow:2px 2px 4px rgba(0,0,0,.8);border-color:#d4af37}.word-display.impostor{color:red;text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 20px rgba(255,0,0,.6);border-color:#8b0000;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;justify-content:center;align-items:center;z-index:1000}.modal-overlay[style*="display: none"]{display:none!important}.modal-content{background:#1f1f1f;border:3px solid #4a4a4a;border-radius:0;padding:40px;max-width:600px;width:90%;max-height:85vh;overflow-y:auto;animation:slideIn .3s ease;box-shadow:0 0 50px #000000e6,inset 0 0 20px #00000080;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:20px 20px;position:relative}.modal-overlay:not(.hidden){display:flex!important}.hidden{display:none!important}.modal-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#d4af37;font-size:28px;cursor:pointer;width:auto;padding:0;line-height:1;transition:all .3s;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.modal-close:hover{color:#fff;transform:rotate(90deg)}.modal-content h2{color:#d4af37;margin-bottom:25px;font-size:1.8em;font-family:Special Elite,cursive;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.8);text-align:center}.instructions-content{color:#b8b8b8;text-align:left;line-height:1.8}.instructions-content h3{color:#d4af37;margin-top:20px;margin-bottom:10px;font-size:1.2em;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.instructions-content p{margin-bottom:15px;font-size:.95em}.instructions-content ul{margin-left:20px;margin-bottom:15px}.instructions-content li{margin-bottom:10px;font-size:.95em}.instructions-content strong{color:#d4af37;font-weight:700}.btn-close{width:100%;margin-top:30px;background:linear-gradient(180deg,#3a3a3a,#1a1a1a);color:#d4af37;border:2px solid #4a4a4a;padding:15px;font-size:1.1em;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .3s}.btn-close:hover{background:linear-gradient(180deg,#4a4a4a,#2a2a2a);border-color:#d4af37;box-shadow:0 6px 15px #000000b3,0 0 20px #d4af3733;transform:translateY(-2px)}.btn-instructions{position:fixed;top:20px;right:20px;left:auto;padding:12px 20px;background:linear-gradient(180deg,#3a3a3a,#1a1a1a);color:#d4af37;border:2px solid #4a4a4a;border-radius:0;font-size:.95em;font-weight:700;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:1px;font-family:Courier Prime,monospace;z-index:999;white-space:nowrap;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis}.btn-instructions:hover{background:linear-gradient(180deg,#4a4a4a,#2a2a2a);border-color:#d4af37;box-shadow:0 4px 10px #00000080,0 0 15px #d4af3733;transform:translateY(-2px)}.setup-screen{position:relative;display:flex;flex-direction:column;gap:20px}.btn-start{width:100%;padding:15px;background:linear-gradient(180deg,#3a3a3a,#1a1a1a);color:#d4af37;border:2px solid #4a4a4a;border-radius:0;font-size:1.2em;font-weight:700;cursor:pointer;transition:all .3s;font-family:Courier Prime,monospace;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 10px #00000080,inset 0 1px #ffffff1a}.btn-start:hover{background:linear-gradient(180deg,#4a4a4a,#2a2a2a);border-color:#d4af37;box-shadow:0 6px 15px #000000b3,0 0 20px #d4af3733,inset 0 1px #ffffff1a;transform:translateY(-2px)}.btn-start:active{transform:translateY(0);box-shadow:0 2px 5px #00000080,inset 0 1px #ffffff1a}.game-over{text-align:center;padding:20px}.game-over h2{color:#d4af37;margin-bottom:20px;font-size:2em;font-family:Special Elite,cursive;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.game-over p{color:#b8b8b8;margin-bottom:30px;font-size:1.2em;line-height:1.6}.reset-btn{background:linear-gradient(180deg,#8b0000,#5a0000);border-color:#8b0000}.reset-btn:hover{background:linear-gradient(180deg,#a00000,#6a0000);border-color:#a00000;box-shadow:0 6px 15px #000000b3,0 0 20px #8b000066,inset 0 1px #ffffff1a}@media (max-width: 768px){.container{padding:30px 20px;max-width:95%}h1{font-size:2em;letter-spacing:2px}.modal-content{padding:30px 20px}.word-display{font-size:2em}}@media (max-width: 480px){h1{font-size:1.5em;letter-spacing:1px}.word-display{font-size:1.5em;padding:15px}button{font-size:1em;padding:12px}.btn-instructions{top:15px;right:15px;padding:8px 12px;font-size:.8em;letter-spacing:.5px;max-width:calc(100% - 30px)}}
