:root{--color-slate-100: #f1f5f9;--color-slate-300: #cbd5e1;--color-slate-400: #94a3b8;--color-slate-500: #64748b;--color-slate-600: #475569;--color-slate-700: #334155;--color-slate-800: #1e293b;--color-slate-900: #0f172a;--color-indigo-200: #c7d2fe;--color-indigo-300: #a5b4fc;--color-indigo-400: #818cf8;--color-indigo-500: #6366f1;--color-indigo-600: #4f46e5;--color-indigo-900: #312e81;--color-rose-200: #fecdd3;--color-rose-500: #f43f5e;--color-rose-600: #e11d48;--color-rose-900: #881337;--color-emerald-300: #6ee7b7;--color-emerald-400: #34d399;--color-emerald-500: #10b981;--color-emerald-600: #059669}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--color-slate-900);color:var(--color-slate-100);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}.card-flip{transition:transform .6s;transform-style:preserve-3d}.perspective{perspective:1000px}.fade-enter{opacity:0;transform:translateY(10px)}.fade-enter-active{opacity:1;transform:translateY(0);transition:opacity .3s,transform .3s}.reveal-bounce{animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55)}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05);opacity:1}70%{transform:scale(.9)}to{transform:scale(1)}}.animate-fade-in{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.text-center{text-align:center}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.break-words{overflow-wrap:break-word}.text-white{color:#fff}.text-slate-100{color:var(--color-slate-100)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-indigo-200{color:var(--color-indigo-200)}.text-indigo-300{color:var(--color-indigo-300)}.text-indigo-400{color:var(--color-indigo-400)}.text-rose-200{color:var(--color-rose-200)}.text-rose-500{color:var(--color-rose-500)}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-400{color:var(--color-emerald-400)}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-2>*+*{margin-top:.5rem}.space-y-6>*+*{margin-top:1.5rem}.space-y-8>*+*{margin-top:2rem}.mt-auto{margin-top:auto}.mt-4{margin-top:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mx-auto{margin-left:auto;margin-right:auto}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pr-1{padding-right:.25rem}.w-full{width:100%}.w-6{width:1.5rem}.w-10{width:2.5rem}.w-32{width:8rem}.w-40{width:10rem}.h-full{height:100%}.h-10{height:2.5rem}.h-32{height:8rem}.h-40{height:10rem}.max-w-xs{max-width:20rem}.max-w-md{max-width:28rem}.max-w-200{max-width:200px}.max-h-60{max-height:15rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.relative{position:relative}.absolute{position:absolute}.inset-0{top:0;right:0;bottom:0;left:0}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.transition{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.cursor-pointer{cursor:pointer}.shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.space-y-4>*+*{margin-top:1rem}.app-container{width:100%;max-width:28rem;background-color:var(--color-slate-800);border-radius:1rem;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;border:1px solid var(--color-slate-700);position:relative;height:min(calc(100vh - 2rem),700px);display:flex;flex-direction:column}.app-header{height:8rem;width:100%;position:relative;overflow:hidden;background-color:var(--color-indigo-900)}.app-header img{width:100%;height:100%;object-fit:cover;opacity:.8}.app-header .gradient-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,var(--color-slate-800),transparent)}.app-header h1{position:absolute;bottom:.5rem;left:1rem;font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:.025em;display:flex;align-items:center;gap:.5rem}.content-area{flex:1;padding:1.5rem;display:flex;flex-direction:column;position:relative;min-height:0;overflow:hidden}.btn{width:100%;font-weight:700;padding:1rem;border-radius:.75rem;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border:none}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--color-indigo-600);color:#fff;box-shadow:0 10px 15px -3px #6366f14d}.btn-primary:hover{background-color:var(--color-indigo-500)}.btn-success{background-color:var(--color-emerald-600);color:#fff;box-shadow:0 10px 15px -3px #0596694d}.btn-success:hover{background-color:var(--color-emerald-500)}.btn-danger{background-color:var(--color-rose-600);color:#fff}.btn-danger:hover{background-color:var(--color-rose-500)}.btn-secondary{background-color:var(--color-slate-700);color:#fff;border:1px solid var(--color-slate-500)}.btn-secondary:hover{background-color:var(--color-slate-600)}.btn-circle{width:2.5rem;height:2.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:all .15s;cursor:pointer;border:none;color:#fff}.btn-circle:active{transform:scale(.95)}.btn-circle-slate{background-color:var(--color-slate-600)}.btn-circle-slate:hover{background-color:var(--color-slate-500)}.btn-circle-indigo{background-color:var(--color-indigo-600)}.btn-circle-indigo:hover{background-color:var(--color-indigo-500)}.panel{background-color:#33415580;padding:1rem;border-radius:.75rem}.panel-bordered{border:1px solid var(--color-slate-600)}.input{width:100%;background-color:var(--color-slate-700);border:1px solid var(--color-slate-600);border-radius:.5rem;padding:.5rem .75rem;color:#fff;transition:border-color .15s;font-size:.95rem}.input:focus{outline:none;border-color:var(--color-indigo-500);background-color:var(--color-slate-600)}.input::placeholder{color:var(--color-slate-400)}.player-input-row{display:flex;align-items:center;gap:.5rem}.player-input-icon{color:var(--color-slate-400);font-size:1.25rem}.player-name-input{flex:1;background-color:var(--color-slate-700);border:1px solid var(--color-slate-500);border-radius:.5rem;padding:.625rem .75rem}.select{width:100%;background-color:var(--color-slate-900);border:1px solid var(--color-slate-600);color:#fff;border-radius:.5rem;padding:.75rem}.select:focus{outline:none;box-shadow:0 0 0 2px var(--color-indigo-500)}.hidden{display:none!important}.view{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.role-card{width:100%;max-width:16rem;aspect-ratio:3/4;perspective:1000px;margin:0 auto;cursor:pointer;flex-shrink:1;min-height:0}@media(min-height:700px){.role-card{max-width:20rem}}.role-card-inner{position:relative;width:100%;height:100%;transition:transform .5s}.role-card-face{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;box-shadow:0 25px 50px -12px #00000040}.role-card-civil{background-color:var(--color-slate-800);border:2px solid var(--color-emerald-500);box-shadow:0 25px 50px -12px #05966933}.role-card-impostor{background-color:var(--color-slate-800);border:2px solid var(--color-rose-500);box-shadow:0 25px 50px -12px #88133733}.role-card-cover{background-color:var(--color-slate-800);border:2px solid rgb(99 102 241 / .5)}.avatar{width:8rem;height:8rem;border-radius:9999px;object-fit:cover;box-shadow:0 10px 15px -3px #0000001a}.avatar-lg{width:10rem;height:10rem;border:4px solid var(--color-slate-700);box-shadow:0 20px 25px -5px #0000001a}.icon-circle{width:8rem;height:8rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;border-width:4px}.icon-circle-indigo{background-color:#312e8180;border-color:#6366f14d;box-shadow:0 0 30px #6366f14d}.icon-circle-rose{background-color:#88133780;border-color:var(--color-rose-500);box-shadow:0 0 40px #e11d4880}.info-box{background-color:#312e814d;padding:1rem;border-radius:.5rem;border:1px solid rgb(99 102 241 / .2);width:100%}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:var(--color-slate-800);border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--color-slate-600);border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--color-slate-500)}