:root {
    /* --- COLOR PALETTE --- */
    --primary: #0be881;
    --primary-dark: #05c46b;
    --bg-gradient: linear-gradient(135deg, #1e272e 0%, #485460 100%);
    --card-bg: rgba(255, 255, 255, 0.08);
    --text-main: #ffffff;
    --text-muted: #d2dae2;
    
    /* ANSWER COLORS (Synced with Lobby) */
    --color-a: #ff5e57; --color-a-dark: #ff3f34;
    --color-b: #3498db; --color-b-dark: #2980b9;
    --color-c: #f1c40f; --color-c-dark: #f39c12;
    --color-d: #2ecc71; --color-d-dark: #27ae60;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    font-family: 'Poppins', sans-serif; 
    text-align: center; 
    margin: 0; 
    padding: 20px; 
    background: var(--bg-gradient); 
    color: var(--text-main); 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    overflow: hidden;
}

/* LAYOUT */
.container { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    max-width: 600px; 
    margin: 0 auto; 
    width: 100%; 
}

/* SCREENS & CARDS */
#login-form, #waiting-screen, #result-screen, #game-over-screen, #excluded-screen {
    width: 100%; 
    max-width: 400px; 
    background: var(--card-bg); 
    backdrop-filter: blur(10px);
    padding: 30px; 
    border-radius: 24px; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1); 
    animation: fadeInUp 0.5s ease;
}

#waiting-screen, #result-screen, #game-over-screen, #excluded-screen { 
    display: none; 
    height: 60vh; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
}

/* TYPOGRAPHY */
h1 { 
    font-weight: 800; 
    font-size: 2rem; 
    margin: 0 0 25px 0; 
    background: linear-gradient(to right, #00d2ff, #3a7bd5); 
    background-clip: text;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    color: transparent;
}

.icon-large { font-size: 5rem; margin-bottom: 20px; animation: float 3s ease-in-out infinite; }
.status-title { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.status-msg { font-size: 1.2rem; color: var(--text-muted); line-height: 1.5; }

/* INPUTS & BUTTONS */
input { 
    display: block; 
    width: 100%; 
    padding: 16px; 
    margin-bottom: 15px; 
    font-size: 1.1rem; 
    border: 2px solid rgba(255,255,255,0.1); 
    border-radius: 12px; 
    background: rgba(0,0,0,0.3); 
    color: white; 
    text-align: center; 
    transition: all 0.3s; 
}
input:focus { border-color: var(--primary); outline: none; background: rgba(0,0,0,0.5); }

.btn-primary { 
    width: 100%; 
    padding: 16px; 
    background: var(--primary); 
    color: #1e272e; 
    border: none; 
    font-size: 1.2rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    cursor: pointer; 
    border-radius: 12px; 
    box-shadow: 0 4px 0 var(--primary-dark); 
    transition: transform 0.1s; 
    margin-top: 10px; 
}
.btn-primary:active { transform: translateY(4px); box-shadow: none; }
.btn-primary:disabled { background: #555; box-shadow: none; cursor: not-allowed; color: #aaa; }

/* GAME GRID */
#game-area { 
    display: none; 
    width: 100%; 
    height: 75vh; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 15px; 
    margin-top: 20px; 
    padding-bottom: 20px; 
}

.ans-btn { 
    border: none; 
    border-radius: 20px; 
    font-size: 3rem; 
    color: rgba(0,0,0,0.4); 
    font-weight: 900; 
    cursor: pointer; 
    transition: transform 0.1s; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 8px 0 rgba(0,0,0,0.2), 0 15px 20px rgba(0,0,0,0.2); 
}
.ans-btn:active { transform: translateY(8px); box-shadow: 0 0 0 rgba(0,0,0,0.2); }

.ans-btn.selected { 
    transform: translateY(8px); 
    box-shadow: none !important; 
    filter: brightness(1.1); 
    border: 4px solid white; 
    color: white; 
}
.ans-btn.dimmed { opacity: 0.3; pointer-events: none; transform: translateY(8px); box-shadow: none; }

.ans-a { background: var(--color-a); box-shadow: 0 8px 0 var(--color-a-dark); }
.ans-b { background: var(--color-b); box-shadow: 0 8px 0 var(--color-b-dark); color: rgba(255,255,255,0.4); }
.ans-c { background: var(--color-c); box-shadow: 0 8px 0 var(--color-c-dark); }
.ans-d { background: var(--color-d); box-shadow: 0 8px 0 var(--color-d-dark); }

/* EXTRAS */
#room-display { 
    background: rgba(0,0,0,0.2); 
    padding: 12px; 
    border-radius: 12px; 
    margin-bottom: 20px; 
    font-size: 0.9rem; 
    color: var(--text-muted); 
    border: 1px dashed rgba(255,255,255,0.2); 
}
#room-display span { color: var(--primary); font-weight: bold; font-size: 1.1rem; display: block; margin-top: 4px; }

.correct-answer-box { 
    background: rgba(11, 232, 129, 0.1); 
    border: 2px solid var(--primary); 
    padding: 20px; 
    border-radius: 16px; 
    color: var(--primary); 
    font-size: 1.3rem; 
    margin-top: 25px; 
    font-weight: 600; 
    width: 100%; 
}

.timer-bar { 
    position: fixed; top: 0; left: 0; width: 100%; height: 8px; 
    background: rgba(255,255,255,0.1); display: none; z-index: 100; 
}
.timer-fill { 
    height: 100%; 
    background: linear-gradient(90deg, #00d2ff, #3a7bd5); 
    width: 100%; 
    border-radius: 0 4px 4px 0; 
    box-shadow: 0 0 10px #00d2ff; 
}

/* ANIMATIONS */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }