:root{--vk-purple:#8b00ff;--vk-red:#ff003c;--vk-dark:#0d0010;--vk-card:rgba(30,0,50,0.88)}
body{
    background: 
        linear-gradient(180deg, rgba(13, 0, 16, 0.65) 0%, rgba(13, 0, 16, 0.9) 70%, #0d0010 100%),
        url('/images/vampirkoylu_bg.png') center center / cover no-repeat fixed !important;
}
#vk-app{font-family:'Inter',sans-serif;min-height:100vh;padding-bottom:3rem}
.vk-hero{text-align:center;padding:3rem 1rem 1.5rem}
.vk-hero h1{font-family:'Cinzel Decorative',serif;font-size:clamp(2rem,6vw,3.2rem);font-weight:900;background:linear-gradient(90deg,#ff3b21,#ff003c,#8b00ff,#ff003c,#ff3b21);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:heroShimmer 4s linear infinite;filter:drop-shadow(0 0 25px rgba(255,0,60,0.55));margin:0}
.vk-hero p{color:rgba(255, 235, 220, 0.7);margin-top:.6rem;font-size:.9rem;letter-spacing:.08em;font-style:italic}
@keyframes heroShimmer{0%{background-position:0% center}100%{background-position:300% center}}
.vk-card{background:rgba(12, 4, 10, 0.72);border:1px solid rgba(255, 0, 60, 0.25);border-radius:1.5rem;padding:2rem 1.5rem;box-shadow:0 15px 45px rgba(0,0,0,0.75),0 0 30px rgba(139,0,255,0.08);backdrop-filter:blur(10px);max-width:480px;margin:0 auto 1.25rem}
.vk-section-title{font-family:'Cinzel Decorative',serif;font-size:.9rem;color:var(--vk-purple);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;text-align:center;filter:drop-shadow(0 0 6px rgba(139,0,255,0.5))}
.player-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem;justify-content:center}
.player-chip{display:flex;align-items:center;gap:.35rem;background:rgba(139,0,255,0.18);border:1px solid rgba(139,0,255,0.4);border-radius:2rem;padding:.25rem .65rem;font-size:.82rem;color:#e8d0ff;animation:chipIn .2s ease}
.player-chip.host{border-color:rgba(255,200,0,.6);background:rgba(255,200,0,.12)}
.player-chip.dead{opacity:.4;text-decoration:line-through}
@keyframes chipIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.vk-input{background:rgba(255,255,255,0.06)!important;border:1px solid rgba(139,0,255,0.4)!important;border-radius:.75rem!important;color:#fff!important;font-size:1rem!important;padding:.55rem .9rem!important;transition:border-color .25s,box-shadow .25s;width:100%}
.vk-input:focus{border-color:var(--vk-purple)!important;box-shadow:0 0 0 3px rgba(139,0,255,0.25)!important;outline:none}
.vk-input::placeholder{color:rgba(255,255,255,0.3)!important}
.vk-btn{border:none;border-radius:.85rem;font-weight:700;font-size:.9rem;padding:.65rem 1.2rem;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s;letter-spacing:.04em;width:100%}
.vk-btn:active{transform:scale(.95)}
.vk-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.25)}
.vk-btn:disabled:active{transform:none}
.vk-btn-primary{background:linear-gradient(135deg,#8b00ff,#ff003c);color:#fff;box-shadow:0 4px 20px rgba(139,0,255,0.4)}
.vk-btn-primary:hover{filter:brightness(1.15);box-shadow:0 6px 28px rgba(255,0,60,0.5)}
.vk-btn-secondary{background:rgba(255,255,255,0.08);color:#d0b4ff;border:1px solid rgba(139,0,255,0.35)}
.vk-btn-secondary:hover{background:rgba(139,0,255,0.2)}
.vk-btn-danger{background:linear-gradient(135deg,#c0002b,#ff6030);color:#fff;box-shadow:0 4px 18px rgba(192,0,43,0.4)}
.vk-btn-success{background:linear-gradient(135deg,#00b851,#00e070);color:#fff;box-shadow:0 4px 18px rgba(0,184,81,0.4)}
.vk-select{background:#1a0030!important;border:1px solid rgba(139,0,255,0.45);border-radius:.6rem;color:#e8d0ff!important;padding:.4rem .7rem;font-size:.88rem;width:100%;cursor:pointer;-webkit-appearance:auto;appearance:auto;margin-bottom:.6rem}
.vk-select option{background:#1a0030;color:#e8d0ff}
.room-code{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,10vw,4.5rem);letter-spacing:.25em;text-align:center;color:#fff;filter:drop-shadow(0 0 20px rgba(139,0,255,0.7));margin:.5rem 0}
.room-code-hint{text-align:center;font-size:.78rem;color:rgba(255,255,255,0.35);margin-bottom:1rem}
.lobby-warning{background:rgba(255,187,51,.11);border:1px solid rgba(255,187,51,.32);border-radius:.85rem;color:#ffcf66;font-size:.8rem;line-height:1.35;margin:0 0 .9rem;padding:.6rem .75rem;text-align:center}
.lobby-warning span{color:rgba(255,255,255,.55)}
.lobby-kick-btn{border:1px solid rgba(255,96,96,.45);background:rgba(255,31,61,.16);border-radius:999px;color:#ffb7b7;cursor:pointer;font-size:.68rem;font-weight:800;line-height:1;margin-left:.25rem;padding:.22rem .45rem}
.lobby-kick-btn:hover{background:rgba(255,31,61,.28);color:#fff}
.role-count-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.04);border:1px solid rgba(139,0,255,0.25);border-radius:.85rem;padding:.5rem .8rem;margin-bottom:.5rem}
.role-count-label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#e8d0ff}
.role-badge{font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:1rem;letter-spacing:.04em}
.badge-vampir{background:rgba(255,0,60,0.25);color:#ff4060;border:1px solid rgba(255,0,60,0.4)}
.badge-koylu{background:rgba(0,184,81,0.2);color:#00e070;border:1px solid rgba(0,184,81,0.4)}
.badge-doktor{background:rgba(255,153,0,0.2);color:#ffbb33;border:1px solid rgba(255,153,0,0.4)}
.count-ctrl{display:flex;align-items:center;gap:.35rem}
.count-btn{width:26px;height:26px;border-radius:50%;border:1px solid rgba(139,0,255,0.4);background:rgba(139,0,255,0.15);color:#e8d0ff;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.count-btn:hover{background:rgba(139,0,255,0.35)}
.count-num{min-width:22px;text-align:center;font-weight:700;color:#fff;font-size:.9rem}
.role-display{padding:1.2rem;border-radius:1rem;border:2px solid;text-align:center;animation:roleIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes roleIn{from{transform:scale(.8) rotateY(40deg);opacity:0}to{transform:scale(1) rotateY(0);opacity:1}}
.role-display.vampir{border-color:#ff003c;background:rgba(255,0,60,0.12)}
.role-display.koylu{border-color:#00b851;background:rgba(0,184,81,0.1)}
.role-display.doktor{border-color:#ff9900;background:rgba(255,153,0,0.12)}
.role-icon{font-size:3rem;line-height:1;margin-bottom:.4rem}
.role-name{font-family:'Cinzel Decorative',serif;font-size:1.3rem;font-weight:900;margin-bottom:.2rem}
.role-display.vampir .role-name{color:#ff4060}
.role-display.koylu .role-name{color:#00e070}
.role-display.doktor .role-name{color:#ffbb33}
.role-desc{color:rgba(255,255,255,0.6);font-size:.78rem}
.team-info{margin-top:.6rem;background:rgba(255,0,60,0.12);border:1px solid rgba(255,0,60,0.35);border-radius:.6rem;padding:.4rem .7rem;font-size:.78rem;color:#ff8080}
.night-card{background:rgba(5,0,18,0.97);border:1px solid rgba(80,0,160,0.5);border-radius:1rem;padding:1.2rem;text-align:center}
.night-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.morning-event{border-radius:.75rem;padding:.6rem .8rem;margin-bottom:.5rem;font-size:.88rem}
.morning-dead{background:rgba(255,0,60,0.12);border:1px solid rgba(255,0,60,0.35);color:#ff6080}
.morning-saved{background:rgba(0,184,81,0.12);border:1px solid rgba(0,184,81,0.35);color:#00e070}
.morning-quiet{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.5)}
.result-emoji{font-size:3.5rem;margin-bottom:.4rem}
.victory-art{width:100%;max-width:360px;aspect-ratio:16/9;margin:0 auto 1rem;border-radius:1.1rem;overflow:hidden;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 34px rgba(0,0,0,.36)}
.victory-art img{width:100%;height:100%;object-fit:cover;display:block}
.victory-art-koylu{border-color:rgba(255,226,160,.36);box-shadow:0 18px 34px rgba(0,0,0,.36),0 0 28px rgba(240,176,93,.14)}
.result-title{font-family:'Cinzel Decorative',serif;font-size:1.4rem;margin-bottom:.2rem}
.result-sub{color:rgba(255,255,255,0.5);font-size:.85rem}
.vote-progress{text-align:center;padding:.4rem;background:rgba(139,0,255,0.1);border-radius:.5rem;font-size:.8rem;color:#d0b4ff;margin-bottom:.6rem}
.error-toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%);background:rgba(255,0,60,0.9);color:#fff;padding:.6rem 1.2rem;border-radius:.75rem;font-size:.85rem;font-weight:600;z-index:9999;animation:slideDown .3s ease}
@keyframes slideDown{from{transform:translateX(-50%) translateY(-100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.phase-section{display:none}
.phase-section.active{display:block}
.waiting-pulse{animation:waitPulse 2s ease-in-out infinite}
@keyframes waitPulse{0%,100%{opacity:.5}50%{opacity:1}}
.gap-2{display:flex;gap:.5rem}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:.8rem}
.mb-1{margin-bottom:.5rem}
.text-center{text-align:center}
.text-muted{color:rgba(255,255,255,0.4);font-size:.8rem}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:rgba(139,0,255,0.4);border-radius:4px}
/* --- PREMIUM STATS UI --- */
.stats-premium-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(139,0,255,0.2), rgba(255,0,60,0.2));
    border: 1px solid rgba(139,0,255,0.5);
    border-radius: 16px;
    padding: 12px 20px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 0 10px rgba(139,0,255,0.1);
    backdrop-filter: blur(5px);
}
.stats-premium-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(139,0,255,0.35), rgba(255,0,60,0.35));
    box-shadow: 0 8px 25px rgba(139,0,255,0.3), inset 0 0 15px rgba(255,255,255,0.1);
    border-color: rgba(255,0,60,0.6);
}
.stats-premium-btn:active {
    transform: translateY(1px);
}
.stats-icon { font-size: 1.2rem; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
.stats-text { letter-spacing: 0.05em; text-transform: uppercase; font-family: 'Cinzel Decorative', serif; font-size: 0.9rem; }

.stats-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5,0,15,0.85);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}
.stats-modal-content {
    background: linear-gradient(180deg, rgba(30,0,50,0.95), rgba(10,0,20,0.98));
    border: 1px solid rgba(139,0,255,0.4);
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
    animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}
.stats-header {
    text-align: center; margin-bottom: 24px;
}
.stats-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 15px rgba(139,0,255,0.8);
    background: linear-gradient(90deg, #d0b4ff, #ffbb33);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px;
}
.stat-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 16px 8px;
    text-align: center;
    transition: transform 0.2s;
}
.stat-box:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); }
.stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.stat-value { font-size: 1.6rem; font-weight: 900; color: #fff; line-height: 1; }
.stat-value.win { color: #00e070; text-shadow: 0 0 10px rgba(0,224,112,0.4); }
.stat-value.lose { color: #ff003c; text-shadow: 0 0 10px rgba(255,0,60,0.4); }

.role-stats-container {
    background: rgba(0,0,0,0.4);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 20px;
}
.role-stat-row {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.role-stat-row:last-child { margin-bottom: 0; }
.rs-left { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: #fff; width: 35%; }
.rs-right { flex: 1; display: flex; align-items: center; gap: 10px; }
.rs-bar-bg { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.rs-bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease-out; }
.rs-vampir .rs-bar-fill { background: linear-gradient(90deg, #8b00ff, #ff003c); box-shadow: 0 0 8px #ff003c; }
.rs-doktor .rs-bar-fill { background: linear-gradient(90deg, #ff9900, #ffbb33); box-shadow: 0 0 8px #ffbb33; }
.rs-koylu .rs-bar-fill { background: linear-gradient(90deg, #00b851, #00e070); box-shadow: 0 0 8px #00e070; }
.rs-text { font-size: 0.75rem; color: rgba(255,255,255,0.7); min-width: 45px; text-align: right; }

.stats-close-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    color: #fff; padding: 12px; width: 100%; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.stats-close-btn:hover { background: rgba(255,255,255,0.1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- NIGHT TARGET GRID UI --- */
.target-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}
.target-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(139, 0, 255, 0.25);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.target-card:hover:not(.disabled) {
    background: rgba(139, 0, 255, 0.08);
    border-color: rgba(139, 0, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 0, 255, 0.2);
}
.target-card.marked {
    background: rgba(255, 0, 60, 0.12);
    border-color: var(--vk-red);
    box-shadow: 0 0 12px rgba(255, 0, 60, 0.35);
}
.target-card.confirmed {
    background: rgba(0, 224, 112, 0.08);
    border-color: #00e070;
    box-shadow: 0 0 12px rgba(0, 224, 112, 0.25);
}
.target-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.target-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.target-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 4px;
    min-height: 18px;
}
.target-badge {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(255, 0, 60, 0.2);
    border: 1px solid rgba(255, 0, 60, 0.4);
    color: #ff6080;
    border-radius: 4px;
    padding: 1px 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Morning Consensus Disagreement Alert Style */
.morning-conflict {
    background: rgba(255, 107, 0, 0.12);
    border: 1px solid rgba(255, 107, 0, 0.35);
    color: #ffaa66;
}

/* --- RED / DARK THEME OVERRIDES --- */
:root {
    --vk-purple: #b11226;
    --vk-red: #ff1f3d;
    --vk-dark: #050303;
    --vk-card: rgba(22, 5, 7, 0.92);
}

body {
    background: #050204 !important;
}

#vk-app {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(5,2,4,0.65), rgba(5,2,4,0.9) 50%, #050204 100%),
        url('/images/vampirkoylu_bg.png') center center / cover fixed no-repeat;
}

#vk-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.7), transparent 26%, transparent 74%, rgba(0,0,0,0.7)),
        repeating-linear-gradient(90deg, rgba(139,0,0,0.015) 0, rgba(139,0,0,0.015) 1px, transparent 1px, transparent 34px);
    pointer-events: none;
}

.vk-hero h1 {
    background: linear-gradient(90deg, #fff0e8, #ff4a58, #a4071d, #ff4a58, #fff0e8);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(164,7,29,0.58));
}

.vk-card {
    background: rgba(10, 3, 4, 0.96);
    border-color: rgba(255, 74, 88, 0.28);
    box-shadow: 0 16px 46px rgba(0,0,0,0.72), 0 0 30px rgba(125,5,18,0.16);
}

.vk-section-title {
    color: #ff6f78;
    filter: drop-shadow(0 0 7px rgba(255,31,61,0.34));
}

.vk-input {
    border-color: rgba(255,74,88,0.32) !important;
    background: rgba(255,255,255,0.055) !important;
}

.vk-input:focus {
    border-color: #ff4a58 !important;
    box-shadow: 0 0 0 3px rgba(255,31,61,0.18) !important;
}

.vk-btn-primary {
    background: linear-gradient(135deg, #8e0718, #e31b35);
    box-shadow: 0 5px 22px rgba(164,7,29,0.35);
}

.vk-btn-primary:hover {
    box-shadow: 0 7px 30px rgba(227,27,53,0.44);
}

.vk-btn-secondary {
    color: #ffd0ca;
    border-color: rgba(255,74,88,0.28);
}

.vk-btn-secondary:hover {
    background: rgba(255,31,61,0.12);
}

.player-chip {
    background: rgba(255,31,61,0.12);
    border-color: rgba(255,74,88,0.28);
    color: #ffd6d1;
}

.role-count-row {
    border-color: rgba(255,74,88,0.2);
}

.role-count-label {
    color: #ffd6d1;
}

.count-btn {
    border-color: rgba(255,74,88,0.3);
    background: rgba(255,31,61,0.1);
    color: #ffd6d1;
}

.count-btn:hover {
    background: rgba(255,31,61,0.2);
}

.room-code {
    filter: drop-shadow(0 0 22px rgba(255,31,61,0.42));
}

.night-card {
    background: rgba(7, 3, 4, 0.97);
    border-color: rgba(255,74,88,0.32);
}

.target-card {
    border-color: rgba(255,74,88,0.2);
}

.target-card:hover:not(.disabled) {
    background: rgba(255,31,61,0.08);
    border-color: rgba(255,74,88,0.44);
    box-shadow: 0 4px 14px rgba(255,31,61,0.16);
}

.vote-progress {
    background: rgba(255,31,61,0.1);
    color: #ffb1a2;
}

.stats-premium-btn {
    width: fit-content;
    min-width: 158px;
    margin: 12px auto 0;
    padding: 8px 13px;
    gap: 6px;
    border-radius: 10px;
    font-size: 0.78rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.1), transparent 42%),
        linear-gradient(135deg, rgba(86,4,12,0.94), rgba(196,8,32,0.9));
    border-color: rgba(255,82,96,0.68);
    box-shadow:
        0 10px 24px rgba(0,0,0,0.42),
        0 0 18px rgba(255,31,61,0.2),
        0 -8px 18px rgba(0,0,0,0.28) inset;
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.stats-premium-btn:hover {
    transform: translateY(-1px);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), transparent 38%),
        linear-gradient(135deg, rgba(112,5,16,0.98), rgba(242,18,48,0.94));
    border-color: rgba(255,116,126,0.86);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.5),
        0 0 26px rgba(255,31,61,0.32),
        0 -8px 18px rgba(0,0,0,0.28) inset;
}

.stats-icon {
    font-size: 0.96rem;
    filter: none;
}

.stats-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.stats-modal-overlay {
    background: rgba(5,3,3,0.88);
}

.stats-modal-content {
    background: linear-gradient(180deg, rgba(28,6,8,0.98), rgba(7,3,4,0.99));
    border-color: rgba(255,74,88,0.32);
}

.stats-title {
    text-shadow: 0 0 14px rgba(255,31,61,0.58);
    background: linear-gradient(90deg, #fff0e8, #ff4a58);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rs-vampir .rs-bar-fill {
    background: linear-gradient(90deg, #780815, #ff1f3d);
}

/* --- NIGHT TRANSITION CARD --- */
.night-transition-card {
    background: linear-gradient(180deg, rgba(5,2,12,0.98), rgba(10,3,4,0.95));
    border: 1px solid rgba(255,74,88,0.18);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}
.night-transition-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 20%, rgba(80,40,120,0.15), transparent 70%);
    pointer-events: none;
}
.night-transition-icon {
    font-size: 3rem;
    margin-bottom: 8px;
    animation: moonFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(255,210,80,0.3));
}
@keyframes moonFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.night-transition-text {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.night-transition-timer {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    color: #ff4a58;
    text-shadow: 0 0 16px rgba(255,31,61,0.5);
    letter-spacing: 0.15em;
}

/* --- KÖYLÜ NIGHT SCREEN --- */
.night-villager-scene {
    position: relative;
    padding: 16px 0 8px;
    margin-bottom: 8px;
}
.night-moon {
    font-size: 3.5rem;
    animation: moonFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(255,210,80,0.25));
}
.night-stars {
    font-size: 1rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.6em;
    animation: starsTwinkle 2.5s ease-in-out infinite alternate;
}
@keyframes starsTwinkle {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.8; transform: scale(1.08); }
}
.night-sleep-btn {
    margin-top: 12px;
    font-size: 1rem !important;
    padding: 14px 20px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(100,140,255,0.3) !important;
    color: #b8c8ff !important;
    transition: all 0.3s ease !important;
}
.night-sleep-btn:hover {
    background: rgba(100,140,255,0.1) !important;
    border-color: rgba(100,140,255,0.5) !important;
    box-shadow: 0 4px 18px rgba(100,140,255,0.15) !important;
    transform: translateY(-2px) !important;
}
.night-warning-box {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(255,160,0,0.08);
    border: 1px solid rgba(255,160,0,0.25);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffc862;
    line-height: 1.4;
    animation: warningPulse 3s ease-in-out infinite;
}
@keyframes warningPulse {
    0%,100% { border-color: rgba(255,160,0,0.25); box-shadow: none; }
    50% { border-color: rgba(255,160,0,0.45); box-shadow: 0 0 12px rgba(255,160,0,0.1); }
}
.night-warning-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* --- MORNING PROFESSIONAL DESIGN --- */
.morning-header {
    text-align: center;
    padding: 16px 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.morning-sun-icon {
    font-size: 2.8rem;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 16px rgba(255,160,40,0.3));
    animation: sunRise 1.2s ease-out;
}
@keyframes sunRise {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.morning-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: 0.06em;
}
.morning-info-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
}
.morning-info-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.morning-info-value {
    color: #ffc862;
    font-weight: 700;
}

/* --- DISCUSSION PROFESSIONAL DESIGN --- */
.discussion-header {
    text-align: center;
    margin-bottom: 16px;
}
.discussion-icon {
    font-size: 2.5rem;
    margin-bottom: 4px;
    animation: discussionBounce 0.6s ease-out;
}
@keyframes discussionBounce {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.discussion-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 0.06em;
}
.discussion-subtitle {
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    margin-top: 4px;
}
.discussion-timer-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,160,0,0.06);
    border: 1px solid rgba(255,160,0,0.2);
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #ffbb33;
    font-size: 0.95rem;
}
.discussion-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.discussion-player-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,74,88,0.15);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffd6d1;
    transition: all 0.2s ease;
}
.discussion-player-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,74,88,0.3);
    transform: translateY(-2px);
}
.discussion-player-emoji {
    font-size: 1.4rem;
    margin-bottom: 2px;
}

/* --- HOST COUNTDOWN BUTTON --- */
.host-countdown-btn {
    position: relative;
    overflow: hidden;
}
.host-countdown-btn:disabled {
    opacity: 0.7 !important;
}
.host-countdown-btn:disabled::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff4a58, #ffbb33);
    animation: countdownBar var(--countdown-duration, 20s) linear forwards;
    border-radius: 2px;
}
@keyframes countdownBar {
    from { width: 0%; }
    to { width: 100%; }
}

/* --- DOCTOR DISABLED TARGET CARD --- */
.target-card.doctor-blocked {
    opacity: 0.35;
    cursor: not-allowed;
    position: relative;
}
.target-card.doctor-blocked::after {
    content: "❌ Üst üste koruyamazsın";
    position: absolute;
    bottom: 4px;
    font-size: 0.6rem;
    color: rgba(255,100,100,0.8);
    font-weight: 700;
}