* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    background-attachment: fixed;
    color: #eee;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
h1, h2, h3 { color: #e0a030; }
button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: #e0a030;
    color: #1a1a2e;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
button:hover { background: #f0b040; }
button:disabled { background: #555; color: #999; cursor: default; }
.btn-resource { background: linear-gradient(135deg, #c9a227, #e0a030); color: #1a1a2e; }
.btn-resource:hover { background: linear-gradient(135deg, #d4ad30, #f0b040); }
.btn-draw { background: linear-gradient(135deg, #4a90d9, #3a7bc8); color: #fff; }
.btn-draw:hover { background: linear-gradient(135deg, #5aa0e9, #4a8bd8); }
.btn-secondary { background: transparent; border: 2px solid #e0a030; color: #e0a030; }
.btn-secondary:hover { background: rgba(224, 160, 48, 0.1); }
.btn-secondary.active { background: rgba(224, 160, 48, 0.2); }
.btn-danger { background: #555; color: #ccc; }
.btn-danger:hover { background: #666; }
.btn-success { background: #45a049; color: #fff; }
.btn-success:hover { background: #4fb853; }
input {
    padding: 10px;
    border: 2px solid #333;
    border-radius: 8px;
    background: #16213e;
    color: #eee;
    font-size: 16px;
}
input:focus { outline: none; border-color: #e0a030; }
.card {
    background: #16213e;
    border-radius: 12px;
    padding: 16px;
    margin: 8px;
    border: 1px solid #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.gold { color: #ffd700; }
.color-noble { background: #c9a227; }
.color-religious { background: #4a90d9; }
.color-trade { background: #45a049; }
.color-military { background: #d9534f; }
.color-special { background: #9b59b6; }
.hidden { display: none !important; }
.lang-switcher { display: inline-block; font-size: 14px; color: #888; margin-left: 12px; }
.lang-option { cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.lang-option:hover { color: #eee; }
.lang-option.active { color: #e0a030; font-weight: bold; }

/* District chips — unified style for TV and phone */
.district-chip {
    display: block;
    padding: 3px 8px 3px 6px;
    border-radius: 6px;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    background: #16213e;
    border-left: 5px solid #555;
    text-align: left;
}
.district-chip.color-noble    { border-left-color: #c9a227; background: rgba(201, 162, 39, 0.08); }
.district-chip.color-religious { border-left-color: #4a90d9; background: rgba(74, 144, 217, 0.08); }
.district-chip.color-trade    { border-left-color: #45a049; background: rgba(69, 160, 73, 0.08); }
.district-chip.color-military { border-left-color: #d9534f; background: rgba(217, 83, 79, 0.08); }
.district-chip.color-special  { border-left-color: #9b59b6; background: rgba(155, 89, 182, 0.08); }
.district-effect {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: #aaa;
    font-style: italic;
    margin-top: 1px;
}

.city-districts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

/* Scores table — shared base */
.scores-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.scores-table th, .scores-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid #333;
}
.scores-table th { background: #16213e; color: #e0a030; }
.scores-table .winner-row td { font-weight: bold; color: #e0a030; }
.score-city-row { padding: 4px 8px 10px !important; text-align: left !important; }

/* Timer badge */
.timer-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    background: rgba(224, 160, 48, 0.2);
    color: #e0a030;
    margin-left: 8px;
    min-width: 40px;
    text-align: center;
}
.timer-badge.urgent {
    background: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    animation: timer-pulse 1s ease-in-out infinite;
}
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Character bar */
.char-bar {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0;
}
.char-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    background: #2a2a3e;
    color: #777;
    transition: all 0.3s;
}
.char-icon .char-num {
    font-weight: bold;
}
.char-icon.active {
    background: #9b59b6;
    color: #fff;
}
.char-icon.done {
    opacity: 0.35;
}
.char-icon.murdered {
    border: 1px dashed #e74c3c;
    text-decoration: line-through;
}
.char-icon.robbed {
    border: 1px dashed #f39c12;
}
.char-icon.c-noble    { background: rgba(201, 162, 39, 0.15); color: #c9a227; }
.char-icon.c-religious { background: rgba(74, 144, 217, 0.15); color: #4a90d9; }
.char-icon.c-trade    { background: rgba(69, 160, 73, 0.15); color: #45a049; }
.char-icon.c-military { background: rgba(217, 83, 79, 0.15); color: #d9534f; }
.char-icon.active.c-noble    { background: #c9a227; color: #1a1a2e; }
.char-icon.active.c-religious { background: #4a90d9; color: #fff; }
.char-icon.active.c-trade    { background: #45a049; color: #fff; }
.char-icon.active.c-military { background: #d9534f; color: #fff; }

/* Stat colors */
.stat-gold { color: #ffd700; }
.stat-cards { color: #78bec5; }
.stat-pts { color: #e8b4f8; }

/* Face-up bar */
.face-up-bar {
    text-align: center;
    font-size: 14px;
    color: #aaa;
    margin: 4px 0;
}
.face-up-char {
    display: inline-block;
    padding: 2px 10px;
    margin: 2px;
    background: rgba(224,160,48,0.1);
    border: 1px solid rgba(224,160,48,0.25);
    border-radius: 12px;
    font-size: 13px;
    color: #ccc;
}

/* Event log colors — unified for TV and player */
.ev-round    { color: #e0a030; }
.ev-call     { color: #c39bd3; }
.ev-danger   { color: #f1948a; }
.ev-action   { color: #85c1e9; }
.ev-build    { color: #82e0aa; }
.ev-ability  { color: #f0b27a; }
.ev-draft    { color: #aab7b8; }
.ev-minor    { color: #888; }