*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--primary:#DC2626;--primary-glow:#EF4444;--success:#10b981;--warning:#F59E0B;--info:#a78bfa;--bg:#0a0e1a;--surface:rgba(20,24,41,.6);--card:rgba(30,34,51,.8);--text:#e2e8f0;--dim:#64748b;--night-bg:#060a18;--day-bg:#0e1a12}
html{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:#0a0e1a;color:#e2e8f0;min-height:100dvh;user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.hub-topbar{position:sticky;top:0;z-index:100;background:rgba(10,14,26,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);padding:10px 16px}
.hub-home{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#a78bfa;font-size:.8rem;font-weight:700;letter-spacing:2px;transition:opacity .2s}
.hub-home:active{opacity:.7}
.hub-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:linear-gradient(135deg,#7c3aed,#3b82f6);border-radius:6px;font-size:.65rem;color:#fff}
.screen{display:none;min-height:100dvh;padding:24px 20px}
.screen.active{display:flex;align-items:center;justify-content:center}
.screen.night{background:var(--night-bg)}.screen.day{background:var(--day-bg)}
.container{width:100%;max-width:500px;text-align:center}
.logo{font-size:5rem;margin-bottom:8px}
.title{font-size:2.8rem;font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.subtitle{color:#64748b;font-size:1rem;margin-bottom:32px}
h2{font-size:1.5rem;margin-bottom:20px}
.menu-buttons{display:flex;flex-direction:column;gap:14px}
.btn-primary{width:100%;padding:18px;border:none;border-radius:14px;background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 4px 16px rgba(124,58,237,.3);color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:2px;cursor:pointer}
.btn-primary:active{transform:scale(.97);opacity:.9}
.btn-primary:disabled{opacity:.4}
.btn-secondary{width:100%;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04);color:#e2e8f0;font-size:1.1rem;font-weight:700;letter-spacing:2px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-back{background:0 0;border:none;color:#64748b;font-size:.9rem;margin-top:16px;cursor:pointer;padding:8px}
.btn-invite{width:100%;padding:14px;border:2px dashed rgba(124,58,237,.2);border-radius:14px;background:rgba(124,58,237,.08);color:#a78bfa;font-size:1rem;font-weight:700;cursor:pointer;margin-bottom:16px}
.input-group{margin-bottom:20px;text-align:left}
.input-group label{display:block;color:var(--dim);font-size:.85rem;margin-bottom:8px}
.input-group input{width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);font-size:1.1rem;outline:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .2s}
.input-group input:focus{border-color:rgba(124,58,237,.5);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.code-input{text-transform:uppercase;letter-spacing:8px;text-align:center;font-size:1.8rem!important}
.stepper{display:flex;align-items:center;justify-content:center;gap:20px}
.stepper span{font-size:1.5rem;font-weight:700;min-width:40px;text-align:center}
.stepper-btn{width:44px;height:44px;border-radius:50%;border:2px solid #a78bfa;background:0 0;color:#a78bfa;font-size:1.4rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.stepper-btn:active{background:#7c3aed;color:#fff}
.roles-info{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.roles-info span{background:rgba(20,24,41,.6);border:1px solid rgba(255,255,255,.08);padding:6px 12px;border-radius:8px;font-size:.8rem;color:#94a3b8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.room-code-box{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(20,24,41,.6);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;margin-bottom:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.room-label{color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:2px}
.room-code{font-size:3rem;font-weight:900;letter-spacing:12px;color:#a78bfa}
.players-list{background:rgba(20,24,41,.6);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;margin-bottom:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.player-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(255,255,255,.02);border-radius:10px;margin-bottom:2px}
.player-item:not(:last-child){border-bottom:1px solid rgba(255,255,255,.05)}
.player-name{font-weight:600}.player-tag{font-size:.75rem;color:var(--warning)}
.info{color:#64748b;font-size:.9rem;margin-bottom:16px}
.role-reveal{background:var(--card);border:2px solid rgba(124,58,237,.25);border-radius:20px;padding:40px 24px;margin-bottom:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.role-emoji{font-size:5rem;margin-bottom:12px}
.role-title{font-size:2rem;font-weight:900;color:var(--primary);margin-bottom:8px}
.role-desc{color:var(--dim);font-size:1rem}
.phase-icon{font-size:4rem;margin-bottom:12px}
.game-timer{font-size:2.5rem;font-weight:900;text-align:center;margin-bottom:12px;font-variant-numeric:tabular-nums}
.game-timer.warning{color:var(--primary);animation:pulse .5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.action-label{color:var(--text);font-size:1.1rem;font-weight:600;margin-bottom:12px}
.vote-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.vote-item{padding:16px;background:rgba(20,24,41,.6);border:1px solid rgba(255,255,255,.08);border-radius:12px;font-weight:600;font-size:1.1rem;cursor:pointer;border:2px solid transparent;transition:all .15s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vote-item:active{border-color:#a78bfa;background:rgba(167,139,250,.1)}
.vote-item.selected{border-color:#a78bfa;background:rgba(167,139,250,.15)}
.vote-item.dead{opacity:.3;text-decoration:line-through;pointer-events:none}
.announcement{background:rgba(20,24,41,.6);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;margin-bottom:20px;font-size:1.1rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.announcement .dead-name{color:var(--primary);font-weight:700}
.result-box{background:rgba(20,24,41,.6);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;margin-bottom:20px;text-align:left;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.result-row{display:flex;justify-content:space-between;padding:8px 0}
.result-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.05)}
.result-vamp{color:var(--primary);font-weight:700}
.topbar{display:flex;justify-content:flex-end;margin-bottom:8px}
.btn-quit{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--dim);font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:20px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-quit:active{background:rgba(239,68,68,.3);color:var(--primary)}
.toast{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);background:rgba(20,24,41,.8);border:1px solid rgba(124,58,237,.2);padding:12px 24px;border-radius:14px;font-size:.9rem;color:var(--text);transition:bottom .3s;z-index:100;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.toast.show{bottom:40px}

/* ===== Ses & animasyon guncellemesi (v6) ===== */
.screen.active{animation:screenFade .5s ease}
@keyframes screenFade{from{opacity:0}to{opacity:1}}

/* Gece karartma vinyeti */
body::after{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(10,14,40,0) 35%,rgba(3,5,22,.85) 100%);opacity:0;transition:opacity 1.4s ease;z-index:3}
body.night-dim::after{opacity:1}

/* Rol karti acilis animasyonu */
.role-reveal{animation:roleIn .5s ease-out}
@keyframes roleIn{from{opacity:0;transform:perspective(700px) rotateY(80deg) scale(.9)}to{opacity:1;transform:perspective(700px) rotateY(0) scale(1)}}

/* Olum duyurusu dusme animasyonu */
.announcement.drop-in{animation:annDrop .55s ease-out}
@keyframes annDrop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:translateY(0)}}

/* Oylama butonlari nabiz efekti */
#day-targets .vote-item{animation:votePulse 1.6s ease-in-out infinite}
@keyframes votePulse{0%,100%{box-shadow:0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 18px rgba(239,68,68,.4)}}

.btn-secondary:active,.btn-invite:active,.btn-back:active{transform:scale(.96)}

.confetti-wrap{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:80}
.confetti-piece{position:absolute;top:-14px;width:9px;height:9px;border-radius:2px;opacity:0;animation:confettiFall 3s linear forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:.85;transform:translateY(105vh) rotate(560deg)}}

/* Kick butonu (lobi) */
.kick-btn{width:26px;height:26px;border-radius:8px;border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.12);color:#f87171;font-size:.75rem;font-weight:800;cursor:pointer;flex-shrink:0;margin-left:auto}
.kick-btn.confirm{background:rgba(239,68,68,.5);color:#fff}