/* === KBC Theme Variables === */
:root {
    --kbc-bg-dark: #00001a;
    --kbc-bg-light: #00004d;
    --kbc-gold: #fbbf24;
    --kbc-gold-dark: #b45309;
    --kbc-white: #ffffff;
    --kbc-border: #38bdf8;
    --kbc-locked: #ea580c;
    --kbc-correct: #16a34a;
    --kbc-wrong: #dc2626;
    --kbc-font: 'Poppins', 'Hind', sans-serif;
}

.kbc-body {
    background: radial-gradient(circle, var(--kbc-bg-light) 0%, var(--kbc-bg-dark) 100%);
    font-family: var(--kbc-font);
    color: var(--kbc-white);
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.hidden { display: none !important; }

/* --- Containers --- */
.kbc-box {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--kbc-gold);
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
    animation: zoomIn 0.5s ease;
}

/* --- Typography --- */
.kbc-logo { font-size: 5rem; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(251,191,36,0.5)); }
.kbc-title-main { font-size: 2.8rem; color: var(--kbc-gold); margin: 0 0 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
.kbc-subtitle { font-size: 1.1rem; color: #94a3b8; margin-bottom: 40px; }

/* --- Intro Inputs & Buttons --- */
.player-input-box input {
    width: 80%; padding: 15px 20px; font-size: 1.2rem; border-radius: 30px;
    border: 2px solid var(--kbc-border); background: rgba(0,0,0,0.5); color: white;
    text-align: center; margin-bottom: 25px; outline: none; font-family: inherit; transition: 0.3s;
}
.player-input-box input:focus { border-color: var(--kbc-gold); box-shadow: 0 0 15px rgba(251,191,36,0.3); }

.kbc-btn-start {
    background: linear-gradient(to bottom, #fde047, #f59e0b); color: #000; border: none;
    padding: 15px 40px; font-size: 1.3rem; font-weight: 800; border-radius: 40px;
    cursor: pointer; transition: 0.3s; font-family: inherit; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.kbc-btn-start:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(245,158,11,0.5); }
.kbc-btn-quit { display: block; margin-top: 20px; color: #ef4444; text-decoration: none; font-weight: 600; transition: 0.3s; }
.kbc-btn-quit:hover { color: white; }

/* --- Game Layout --- */
.kbc-layout {
    display: flex; width: 100%; max-width: 1200px; gap: 30px; animation: fadeIn 0.5s ease;
}
.kbc-play-area { flex: 3; display: flex; flex-direction: column; }
.kbc-sidebar { flex: 1; background: rgba(0,0,0,0.5); border: 1px solid var(--kbc-gold-dark); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; }

/* --- Top Bar (Lifelines & Timer) --- */
.kbc-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.lifelines-container { display: flex; gap: 15px; }
.kbc-lifeline {
    width: 60px; height: 40px; border-radius: 20px; background: rgba(0,0,0,0.6);
    border: 2px solid var(--kbc-gold); color: var(--kbc-gold); cursor: pointer;
    font-size: 1.1rem; font-weight: 800; transition: 0.3s; display: flex; align-items: center; justify-content: center;
}
.kbc-lifeline:hover:not(.used) { background: var(--kbc-gold); color: #000; }
.kbc-lifeline.used { opacity: 0.3; border-color: red; color: red; pointer-events: none; position: relative; }
.kbc-lifeline.used::after { content: '❌'; position: absolute; font-size: 1.5rem; color: red; }

.timer-circle {
    width: 80px; height: 80px; border-radius: 50%; border: 4px solid var(--kbc-gold);
    display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800;
    background: rgba(0,0,0,0.6); box-shadow: 0 0 20px rgba(251,191,36,0.3); color: var(--kbc-gold);
}

/* --- Question Area --- */
.question-container { text-align: center; margin-bottom: 40px; position: relative; }
.q-number { color: var(--kbc-gold); font-weight: 700; margin-bottom: 10px; font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase; }
.kbc-question {
    background: linear-gradient(90deg, rgba(30,58,138,0) 0%, rgba(30,58,138,0.8) 50%, rgba(30,58,138,0) 100%);
    border-top: 2px solid var(--kbc-gold); border-bottom: 2px solid var(--kbc-gold);
    padding: 30px 20px; font-size: 1.6rem; font-weight: 700; line-height: 1.5;
}

/* --- Options Area --- */
.options-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kbc-option {
    background: linear-gradient(90deg, rgba(0,0,0,0.8), rgba(30,58,138,0.6));
    border: 2px solid var(--kbc-border); border-radius: 40px; padding: 18px 25px;
    font-size: 1.2rem; cursor: pointer; transition: 0.3s; position: relative; display: flex; align-items: center;
}
.kbc-option:hover:not(.locked):not(.correct):not(.wrong) {
    background: rgba(30,58,138,0.9); border-color: var(--kbc-gold); transform: scale(1.02); box-shadow: 0 0 15px rgba(56,189,248,0.3);
}
.opt-label { color: var(--kbc-gold); font-weight: 800; margin-right: 15px; font-size: 1.3rem; }
.opt-text { font-weight: 600; color: white; }

/* Status Classes */
.kbc-option.locked { background: var(--kbc-locked) !important; border-color: white !important; animation: pulse 0.5s infinite alternate; }
.kbc-option.correct { background: var(--kbc-correct) !important; border-color: white !important; animation: blinkGreen 0.3s 4 alternate; }
.kbc-option.wrong { background: var(--kbc-wrong) !important; border-color: white !important; }
.kbc-option.disabled { opacity: 0; pointer-events: none; }

/* --- Money Tree --- */
.tree-title { color: var(--kbc-gold); text-align: center; border-bottom: 1px solid var(--kbc-gold-dark); padding-bottom: 10px; margin-top: 0; }
.money-tree { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column-reverse; gap: 5px; flex-grow: 1; justify-content: flex-end; }
.tree-item { display: flex; justify-content: space-between; padding: 5px 15px; font-weight: 600; color: var(--kbc-border); border-radius: 5px; font-size: 1.1rem;}
.tree-item.milestone { color: var(--kbc-white); }
.tree-item.active { background: var(--kbc-gold); color: #000; font-weight: 800; transform: scale(1.05); box-shadow: 0 0 10px rgba(251,191,36,0.5); }
.tree-item.passed { color: #475569; }

/* --- Audience Poll Modal --- */
.poll-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.poll-box { background: var(--kbc-bg-light); border: 2px solid var(--kbc-gold); padding: 30px; border-radius: 15px; width: 300px; text-align: center; }
.poll-bars { display: flex; justify-content: space-around; height: 150px; align-items: flex-end; margin-top: 20px; border-bottom: 2px solid white; padding-bottom: 10px;}
.poll-bar-wrapper { display: flex; flex-direction: column; align-items: center; width: 40px; gap: 5px; }
.poll-fill { width: 30px; background: var(--kbc-gold); height: 0%; transition: height 1s ease-out; border-radius: 5px 5px 0 0; }
.poll-pct { font-size: 0.8rem; font-weight: bold; color: var(--kbc-border); }

/* --- End Screen --- */
.final-prize { font-size: 3.5rem; color: var(--kbc-correct); font-weight: 800; text-shadow: 0 4px 15px rgba(22,163,74,0.4); margin: 20px 0; }

/* --- Animations & Responsive --- */
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0% { box-shadow: 0 0 10px rgba(234,88,12,0.5); } 100% { box-shadow: 0 0 25px rgba(234,88,12,1); } }
@keyframes blinkGreen { 0% { background: transparent; } 100% { background: var(--kbc-correct); } }

@media (max-width: 900px) {
    .kbc-layout { flex-direction: column; }
    .kbc-sidebar { order: -1; flex-direction: row; align-items: center; padding: 10px; border-radius: 10px;}
    .tree-title { display: none; }
    .money-tree { flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 5px;}
    .tree-item { font-size: 0.9rem; padding: 5px 10px; white-space: nowrap; }
    .tree-item .q-lvl { display: none; }
}

@media (max-width: 600px) {
    .kbc-question { font-size: 1.2rem; padding: 20px 10px; }
    .options-container { grid-template-columns: 1fr; gap: 15px; }
    .kbc-option { font-size: 1rem; padding: 15px 20px; }
    .player-input-box input { width: 100%; }
}