@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Oswald:wght@500;700&display=swap');

:root {
    --banana: #F4D03F;
    --dark: #1A1A1A;
    --grey: #2C3E50;
    --light: #ECF0F1;
    --blue: #3498DB;
    --red: #E74C3C;
}

body {
    background-color: var(--dark);
    color: var(--light);
    font-family: 'Roboto Mono', monospace;
    margin: 0; padding: 0;
    text-align: center;
}

.container { max-width: 500px; margin: 0 auto; padding: 20px; }
.hidden { display: none !important; }

header { border-bottom: 2px solid var(--banana); padding-bottom: 10px; margin-bottom: 20px; }
.logo { color: var(--banana); font-family: 'Oswald', sans-serif; font-size: 24px; letter-spacing: 2px; cursor: pointer; user-select: none; }

.card {
    background: #252525;
    border: 1px solid #444;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.5);
}

.btn {
    width: 100%; padding: 15px; margin: 10px 0;
    font-family: 'Oswald', sans-serif; font-size: 18px; text-transform: uppercase;
    border: none; cursor: pointer; border-radius: 2px;
    transition: transform 0.1s;
}
.btn:active { transform: translateY(2px); }
.btn.yellow { background: var(--banana); color: var(--dark); font-weight: bold; }
.btn.outline { background: transparent; border: 2px solid var(--banana); color: var(--banana); }
.btn.text { background: transparent; color: #888; font-size: 14px; }
.btn.red { background: var(--red); color: white; font-weight: bold; }

input {
    width: 90%; padding: 15px; margin: 10px 0;
    background: #333; border: 1px solid #555; color: white;
    font-family: 'Roboto Mono', monospace; font-size: 16px; text-align: center;
}

/* TRACKER BUTTONS */
.tracker-btn-group { display: flex; justify-content: space-around; gap: 5px; }
.active-mode { color: var(--banana) !important; border: 1px solid var(--banana) !important; font-weight: bold; }

/* LOBBY */
#disp-code { font-size: 48px; color: var(--banana); letter-spacing: 5px; margin: 10px 0; }
#player-list { list-style: none; padding: 0; }
#player-list li { padding: 10px; border-bottom: 1px solid #333; }
.disconnected { color: #555; font-style: italic; }
.silenced { text-decoration: line-through; opacity: 0.5; color: var(--red); }

/* VOTING */
.btn-vote {
    width: 48%; height: 80px; font-size: 20px; font-weight: bold;
    border: none; border-radius: 4px; color: white; cursor: pointer;
}
.btn-vote:disabled { opacity: 0.3; cursor: not-allowed; }
.yes { background: var(--blue); }
.no { background: var(--red); }
.vote-buttons { display: flex; justify-content: space-between; margin: 20px 0; }

.progress-bar { width: 100%; height: 10px; background: #333; margin: 10px 0; }
#vote-progress { height: 100%; background: var(--banana); transition: width 0.3s; }
.tracker-badge { color: var(--banana); font-size: 12px; border: 1px solid var(--banana); padding: 2px 5px; }

/* PENDING VOTERS */
.tiny-label { font-size: 10px; color: #888; margin-top: 15px; }
.pending-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 5px; }
.pending-list span {
    background: #333; color: #aaa; font-size: 12px;
    padding: 3px 8px; border-radius: 4px; border: 1px solid #444;
}

/* RESULTS & GRAPHS */
.result-banner {
    font-size: 48px; font-family: 'Oswald', sans-serif; padding: 20px;
    color: var(--dark); margin-bottom: 20px;
}
.pass { background: var(--blue); }
.fail { background: var(--red); }

.graph-row { margin-bottom: 15px; text-align: left; }
.graph-label { font-size: 14px; margin-bottom: 5px; }
.graph-track { width: 100%; height: 30px; background: #333; border-radius: 4px; overflow: hidden; }
.graph-fill { height: 100%; transition: width 0.5s; }
.yes-fill { background: var(--blue); }
.no-fill { background: var(--red); }

.alert-card { border: 2px solid var(--red); background: #300; }
.fascist { color: var(--red); font-size: 32px; font-family: 'Oswald', sans-serif; }
.liberal { color: var(--blue); font-size: 32px; font-family: 'Oswald', sans-serif; }

/* MODAL */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999; display: flex; align-items: center; justify-content: center; }
.modal-content { background: #222; padding: 20px; border: 2px solid var(--banana); max-width: 90%; max-height: 80%; overflow-y: auto; text-align: left; width: 400px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; margin-bottom: 15px; }
.close-btn { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

/* --- SECRET MENU HISTORY STYLES --- */
.history-item { margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 10px; }
.h-header { font-weight: bold; color: var(--banana); margin-bottom: 5px; }
.h-details { font-size: 12px; line-height: 1.4; }
.t-blue { color: var(--blue); }
.t-red { color: var(--red); }