:root {
    --red: #e63946;
    --blue: #457b9d;
    --yellow: #e9c46a;
    --green: #2a9d8f;
    --purple: #6c5ce7;
    --dark-bg: #1a1a2e;
    --glass: rgba(255, 255, 255, 0.98);
    --text-main: #333;
}

body { 
    background: linear-gradient(135deg, var(--dark-bg), #16213e);
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
}

.container { width: 95%; max-width: 600px; padding: 10px; }

.card { 
    background: var(--glass);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    text-align: center;
    transition: transform 0.3s;
}

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Typography */
h1, h2 { color: var(--purple); margin-top: 0; }
.logo-text { font-size: 3rem; margin-bottom: 0.5rem; }
.big-pin { font-size: 4rem; letter-spacing: 5px; margin: 10px 0; color: var(--text-main); }

/* Inputs */
input, select {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border: 2px solid #ccc;
    border-radius: 10px;
    font-size: 1.1rem;
    box-sizing: border-box;
}
input:focus { border-color: var(--purple); outline: none; }

/* Buttons */
button { font-family: inherit; }
.btn-primary { 
    background: var(--purple); color: white; width: 100%; padding: 15px; 
    border: none; border-radius: 12px; font-weight: bold; cursor: pointer; 
    font-size: 1.2rem; margin-top: 10px; transition: filter 0.2s;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { 
    background: white; color: var(--purple); width: 100%; padding: 13px; 
    border: 2px solid var(--purple); border-radius: 12px; cursor: pointer; 
    font-weight: bold; margin-top: 10px;
}
.btn-text { background: none; border: none; color: #666; cursor: pointer; margin-top: 10px; text-decoration: underline; }

/* Chart Visualization */
.chart-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    margin: 20px 0;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 10px;
}
.bar-group { display: flex; flex-direction: column; align-items: center; width: 18%; height: 100%; justify-content: flex-end; }
.bar {
    width: 100%;
    transition: height 0.5s ease;
    border-radius: 5px 5px 0 0;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    min-height: 0; /* Important for flex */
}
.bar-label { font-size: 0.8rem; margin-top: 5px; font-weight: bold; }

/* Game Elements */
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.answer-opt { 
    padding: 30px 10px; border: none; border-radius: 12px; 
    font-weight: bold; font-size: 1.2rem; cursor: pointer; color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.answer-opt:disabled { opacity: 0.5; cursor: not-allowed; }

/* Colors */
.opt-0 { background-color: var(--red); }
.opt-1 { background-color: var(--blue); }
.opt-2 { background-color: var(--yellow); }
.opt-3 { background-color: var(--green); }

/* Input Colors for Creator */
.input-red { border-left: 5px solid var(--red); }
.input-blue { border-left: 5px solid var(--blue); }
.input-yellow { border-left: 5px solid var(--yellow); }
.input-green { border-left: 5px solid var(--green); }

/* Lobby List */
.lobby-player-list { 
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; 
    margin: 20px 0; min-height: 50px; 
}
.player-chip { background: #eee; padding: 5px 15px; border-radius: 20px; font-weight: bold; animation: popIn 0.3s; }

@keyframes popIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Timer */
.timer-badge { background: var(--text-main); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; }