.app-root{width:100%;flex:1;max-width:600px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;position:relative}
.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s ease;}
.controls{background:#bb1b3b;padding:20px;border-radius:20px;box-shadow:0 10px 30px #0000001a;width:100%;overflow-y:auto;background-image:linear-gradient(135deg,rgba(255,255,255,.1),rgba(0,0,0,.3));box-shadow:0 0 30px black;}
.controls label{display:block;font-weight:700;color:var(--muted)}
.setup-label{display:block;font-weight:800;color:#fff;margin-bottom:5px;text-align:left;font-size:1.1rem;letter-spacing:1px}
select,input{width:100%;padding:12px;border-radius:10px;border:none;background:var(--muted);background-image:linear-gradient(135deg,rgba(255,255,255,.1),rgba(0,0,0,.3));color:white;outline:none;}
/* --- Chic Input Layout --- */
.input-group-inline{display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,0.2);padding:10px 15px;border-radius:12px;margin-bottom:10px;}
.input-group-inline label{margin:0;color:#fff;font-size:0.95rem;}
.select-wrapper{position:relative;width:80px;}
.select-wrapper::after{content:"▼";font-size:0.8rem;color:#e9206a;position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;}
.select-wrapper select{appearance:none;-webkit-appearance:none;width:100%;padding:8px 30px 8px 15px;margin-bottom:0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);font-weight:700;}
.player-input-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;background:rgba(255,255,255,0.05);padding:5px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.05);}
.player-input-row label{flex:0 0 35px;font-size:0.8rem;color:#e9206a;font-weight:900;}
.player-input-row input{margin-bottom:0;background:transparent;padding:8px;font-size:1rem;}
.player-input-row:focus-within{border-color:rgba(233,32,106,0.5);background:rgba(255,255,255,0.1);}

/* --- Stepper Setup --- */
.setup-step{width:100%;animation:fadeInStep 0.4s ease;display:flex;flex-direction:column;align-items:center;}
@keyframes fadeInStep{from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.category-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;width:100%;justify-content:center;}
.cat-item{padding:10px;border-radius:12px;background:var(--muted);border:2px solid transparent;cursor:pointer;box-shadow:0 4px 6px #0000000d;transition:transform 0.2s,border-color .2s;display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;color:#e9206a;border:2px solid;min-height:60px;}
.cat-item.selected{background:#e9206a;color:#fff;border-color:#fff;transform:scale(1.05);box-shadow:0 0 15px rgba(233,32,106,0.6);}
.cat-item:hover{transform:translateY(-2px)}
.cat-item.hidden-row,.vip-card-new.hidden-row{display:none !important;}
.show-more-btn{grid-column:1 / -1;background:rgba(255,255,255,0.05);color:#e9206a;border:1px dashed #e9206a;padding:10px;border-radius:12px;margin-top:5px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.show-more-btn:hover{background:rgba(233,32,106,0.1);transform:scale(1.02);}

.step-actions{display:flex;justify-content:center;gap:10px;width:100%;max-width:400px;margin:20px auto;z-index:100;}
#btn-to-categories{height:55px;font-size:1.2rem;font-weight:700;box-shadow:0 10px 25px rgba(118,75,162,0.3);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:15px;color:white;width:100%;}
#btn-start{height:55px;font-size:1.2rem;font-weight:700;box-shadow:0 10px 25px rgba(118,75,162,0.3);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:15px;color:white;}
#btn-back-to-players{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:white;}
.buttons{display:flex;flex-direction:column;gap:15px;margin-top:20px}
button{padding:14px 24px;border:none;border-radius:50px;font-size:1rem;font-weight:700;cursor:pointer;transition:transform 0.1s,box-shadow .2s}
.btn-primary{background:var(--card-cover-bg);color:#fff;box-shadow:0 4px 15px #764ba266;flex:1}
.btn-primary:active{transform:scale(0.98)}
.btn-secondary{background:#fff;color:var(--accent);border:2px solid var(--accent)}

.card-area{position:relative;width:var(--card-width);height:var(--card-height);margin:20px 0;perspective:1000px}
.card-wrapper{position:relative;width:100%;height:100%}
.card{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem;font-weight:800;text-align:center;user-select:none;will-change:transform;-webkit-user-drag:none}
.card-bottom{background:var(--card-bottom-bg);color:#333;z-index:1;border:1px solid #eee;box-shadow:inset 0 0 20px #0000000d}
.reveal-hint{position:absolute;top:20px;font-size:.9rem;color:#bbb;font-weight:400;text-transform:uppercase;letter-spacing:1px}
.card-top{background-image:var(--card-cover-bg);color:#fff;z-index:2;cursor:grab;box-shadow:0 10px 30px #0003}
.card-top:active{cursor:grabbing}
.smooth-return{transition:transform .4s cubic-bezier(0.175,0.885,0.32,1.275)}
#player-info{font-size:1.5rem;font-weight:700;color:var(--text-light);margin-bottom:10px;text-align:center;}
#player-inputs{max-height:none!important;overflow:visible!important}

.end-summary{width:100%;text-align:left;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.end-player{padding:10px;background:#bb1b3b;margin-bottom:8px;border-radius:8px;display:flex;justify-content:space-between;color:var(--text-light);background-image:linear-gradient(135deg,rgba(255,255,255,.1),rgba(0,0,0,.3));}
.end-player.spy{border-left:5px solid #ff6b6b}
.end-player.civilian{border-left:5px solid #4CAF50}

#timer-container{display:flex;flex-direction:column;align-items:center;justify-content:center;animation:zoomIn .5s ease;background:rgba(255,255,255,.8);padding:20px;border-radius:20px;}
@keyframes zoomIn{from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
svg{filter:drop-shadow(0 4px 10px #0000001a)}

.reveal-box{background:#ffffffe6;padding:20px;border-radius:15px;box-shadow:0 4px 15px #0000001a;margin-bottom:20px;text-align:center}
.result-card{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-radius:12px;background:#fff;box-shadow:0 2px 8px #0000000d;transition:transform .3s ease;border-left:6px solid #ccc}
.result-card.spy{border-left-color:#ff4757;background:#fff5f5;animation:pulseRed 2s infinite}
.result-card.civilian{border-left-color:#2ed573;background:#f1fcf5}
.role-tag{font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase}
.spy .role-tag{background:#ff4757;color:#fff}
.civilian .role-tag{background:#2ed573;color:#fff}
@keyframes pulseRed{0%{box-shadow:0 0 0 0 #ff475766} 70%{box-shadow:0 0 0 10px #ff475700} 100%{box-shadow:0 0 0 0 #ff475700} }

/* --- VIP PREMIUM CARD DESIGN --- */
.vip-card-new{width:100%;position:relative;border-radius:18px;background:#1a0226;background:linear-gradient(145deg,#2d023b,#1d032a);border:1px solid rgba(233,32,106,0.3);cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 10px 25px rgba(0,0,0,0.5);overflow:hidden;display:flex;flex-direction:column;}
.vip-card-content{padding:15px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;z-index:2;position:relative;height:100%;justify-content:space-between;}
.vip-store-header{grid-column:1 / -1;width:100%;padding:30px 0 10px;text-align:center;font-weight:900;font-size:0.8rem;letter-spacing:4px;color:#e9206a;text-transform:uppercase;opacity:0.9;}
.vip-store-header span::before,.vip-store-header span::after{content:" \2022 ";margin:0 10px;}
.vip-name{color:#fff;font-size:1rem;font-weight:800;margin-bottom:2px;}
.vip-status{color:#e9206a;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:0.8;}
.vip-buy-btn{background:linear-gradient(135deg,#e9206a 0%,#bb1b3b 100%);color:#fff;padding:8px 5px;border-radius:12px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 5px 15px rgba(233,32,106,0.3);width:100%;min-height:38px;}
.v-price{font-size:1.1rem;}
.v-currency{font-size:0.7rem;opacity:0.9;}
.vip-card-new:hover{transform:translateY(-5px);border-color:#e9206a;box-shadow:0 15px 30px rgba(233,32,106,0.2);}
.vip-card-new:hover .vip-buy-btn{filter:brightness(1.2);box-shadow:0 0 20px rgba(233,32,106,0.5);}
.vip-icon{display:none;}