: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;background-color:wheat}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.topic-content{display:flex;justify-content:center;align-items:center}.topic-white{color:#000;border:2px solid #ffffff;background-color:#fff;padding:10px}.topic-black{color:#fff;border:2px solid #000000;background-color:#000;padding:10px}.topic-goat{color:#000;border:2px solid #ffffff;background-color:#fff;padding:10px}.dev-by{font-size:10px;color:#0000006b}.namebox-container{display:flex;flex-direction:column;align-items:center}.content-box{width:300px;margin:0 auto}.inputname-box{position:relative;align-items:center;margin-top:20px;height:25px;margin-bottom:10px;outline:none}.inputname-box input{display:block;margin:0 auto;height:24px;width:150px;padding:0 12px;border:2px solid #333;color:#000;background-color:#fff;font-size:14px;text-align:center}.inputname-box button{position:absolute;right:20px;top:55%;transform:translateY(-50%);height:24px;border:none;background-color:#5cdfa2;color:#fff;cursor:pointer;font-weight:700}.member-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:center}.member-list ul{list-style:none;padding:0;margin:0}.member-list button{height:25px;border:none;background-color:red;color:#fff;cursor:pointer;font-weight:700}.member-item{display:flex;align-items:center;justify-content:space-between;width:100px;color:#f0f8ff;border:2px solid #000;background-color:#000;padding:6px 10px;margin-bottom:8px}.inputrole-box{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px}.inputrole-box input{width:100px;height:23px;padding:0 10px;border-radius:10px;font-size:14px}.white-team{color:#000;border:2px solid #333;background-color:#fff;text-align:center}.black-team{color:#fff;border:2px solid #ffffff;background-color:#000;text-align:center}.goat-team{border:2px solid #ffffff;background-color:#999;text-align:center}.white-team::placeholder{color:#000}.black-team::placeholder{color:#fff}.goat-team::placeholder{color:#000}.inputrole-box button{height:26px;border:none;background-color:#727ff3;color:#fff;cursor:pointer;font-weight:700}.random-button{background-color:#e67575;color:#f0f8ff;border:none;outline:none;width:80px;height:25px}.list-content{color:#000;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.list-content-member,.list-content-role{font-size:13px;padding:6px 10px;display:flex;align-items:center;justify-content:center;min-width:50px}.list-content-member{color:#000;background-color:#fff}.list-content-role{color:#fff;background-color:#000}.list-content p{margin:0}.card{width:120px;height:170px;perspective:1000px;cursor:pointer}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s}.card-inner.flip{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#000}.card-front{background-color:#fff}.card-back{color:#fff;background-color:#000;transform:rotateY(180deg)}.card-container{padding-top:10px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center;transition:transform .25s ease,box-shadow .25s ease;margin-bottom:10px}.ccard{width:120px;height:170px;perspective:1000px;cursor:pointer}.ccard-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s}.ccard-inner.flip{transform:rotateY(180deg)}.ccard-front,.ccard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#000}.ccard-front{background-color:#cc2b2bcf;color:#fff}.ccard-back{transform:rotateY(180deg)}.start-btn{padding:8px 16px;border:none;cursor:pointer;font-weight:700;font-size:14px;transition:.2s;background-color:#000;color:#f0f8ff}.whitesheep-style{background-color:#fff}.blacksheep-style{background-color:#000;color:#fff}.goat-style{background-color:#ff92048f}.alive-box{display:flex;justify-content:center;margin-top:15px}.whitesheep-alivebox{width:60px;height:40px;display:flex;align-items:center;justify-content:center;background-color:#0000008f}.blacksheep-alivebox{width:60px;height:40px;display:flex;align-items:center;justify-content:center;background-color:#ffffff8f;color:#000}.goat-alivebox{width:60px;height:40px;display:flex;align-items:center;justify-content:center;background-color:#ff92048f;color:#fff}.modal-backdrop{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center}.modal{background:#fff;color:#000;padding:20px;border-radius:12px;text-align:center}.modal-actions{display:flex;justify-content:center;gap:12px}.modal-actions button{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:700;font-size:14px;transition:.2s}.modal-actions button:first-child{background-color:#4caf50;color:#fff}.modal-actions button:last-child{background-color:#f44336;color:#fff}.modal-goatpopup{background:#fff;color:#000;padding:20px;border-radius:12px;text-align:center}.modal-goatpopup input{margin-bottom:15px;text-align:center}