/* ...保留之前的通用样式... */
body { background: #121212; color: #eee; font-family: 'Segoe UI', sans-serif; max-width: 600px; margin: 0 auto; padding: 10px; }
.hidden { display: none !important; }
.center { text-align: center; }
.card { background: #1e1e1e; padding: 15px; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }

.bank-card { background: linear-gradient(135deg, #2c3e50, #000); border: 1px solid #444; text-align: center; }
.bank-amount { font-size: 2.5em; color: #ffd700; font-weight: bold; margin: 5px 0; }
.bank-details { color: #aaa; font-size: 0.9em; }

.gold { color: #ffd700; font-weight: bold; }
.my-role { color: #00e5ff; font-weight: bold; }

/* 布局 */
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.role-grid-small { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.pool-container { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; justify-content: center; }
.action-row { display: flex; gap: 10px; margin-top: 15px; }

/* === 核心按钮样式 === */
.btn { border: none; border-radius: 4px; color: white; padding: 10px; width: 100%; cursor: pointer; font-size: 1em; font-weight: bold; transition: transform 0.1s; }
.btn:active { transform: scale(0.98); }

/* 通用功能按钮 */
.btn-blue { background: #007bff; }
.btn-red { background: #c0392b; }
.btn-green { background: #27ae60; box-shadow: 0 0 10px #27ae60; }
.btn-gray { background: #7f8c8d; }
.small { width: auto; font-size: 0.8em; padding: 5px 15px; }

/* === 身份专属颜色 === */
/* 告密者: 灰褐色 */
.role-snitch { background-color: #8d6e63 !important; border: 1px solid #6d4c41 !important; color: white !important; }
/* 恶棍: 蓝色 */
.role-villain { background-color: #007bff !important; border: 1px solid #0056b3 !important; color: white !important; }
/* 暴徒: 红色 */
.role-thug { background-color: #dc3545 !important; border: 1px solid #a71d2a !important; color: white !important; }
/* 司机: 绿色 */
.role-driver { background-color: #28a745 !important; border: 1px solid #1e7e34 !important; color: white !important; }
/* 谋士: 黄色 (文字用深色以保证对比度) */
.role-counselor { background-color: #ffc107 !important; border: 1px solid #d39e00 !important; color: #212529 !important; }

/* 身份按钮基础 */
.role-btn { padding: 15px; border-radius: 5px; cursor: pointer; opacity: 0.8; }
.role-btn:hover:not([disabled]) { opacity: 1; transform: translateY(-2px); }
.role-btn:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(80%); }

/* 选中状态：不再变色，而是加粗边框和发光 */
.role-btn.selected { 
    opacity: 1; 
    border: 3px solid white !important; 
    box-shadow: 0 0 10px rgba(255,255,255,0.5); 
    transform: scale(1.05);
}

/* 声明小按钮 */
.role-btn-small { padding: 5px 10px; border-radius: 4px; font-size: 0.8em; cursor: pointer; opacity: 0.6; }
.role-btn-small:hover:not([disabled]) { opacity: 1; }
.role-btn-small.active-decl { 
    opacity: 1; 
    border: 2px solid white !important; 
    box-shadow: 0 0 5px white;
}

/* 牌池卡片 */
.pool-card { background: #444; color: #ccc; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 0.9em; border: 1px solid #555; }
.pool-card.clickable { cursor: pointer; border: 2px solid red; }

/* 徽章 (用于列表显示) */
.badge { padding: 2px 6px; border-radius: 4px; font-size: 0.8em; margin-right: 3px; display: inline-block;}

/* 其他 */
.red-border { border: 2px solid #e74c3c; background: #300; }
.player-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #333; align-items: center; }
.status-badge { font-size: 0.8em; padding: 2px 6px; border-radius: 3px; }
.st-picking { color: #f1c40f; } .st-discussing { color: #3498db; } .st-ready { background: #27ae60; color: white; } .st-folded { text-decoration: line-through; color: #666; }
.mark-select { background: #222; color: #888; border: 1px solid #444; font-size: 0.8em; margin-left: 5px; border-radius: 3px; max-width: 80px;}
.log-box { height: 150px; overflow-y: auto; background: #000; padding: 10px; border: 1px solid #333; font-size: 0.85em; color: #ccc; font-family: monospace; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 100; }
input { padding: 10px; width: 70%; margin-bottom: 10px; background: #333; border: 1px solid #555; color: white; }
#calc-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background: #252525;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

/* 结果数字 */
.calc-result {
    font-family: monospace;
    font-weight: bold;
    font-size: 1.1em;
    color: #ffd700;
}

/* 状态：明牌-激活 (参与计算) */
.calc-row.public-active {
    opacity: 1;
    border-left: 4px solid #28a745; /* 绿色左边条 */
}

/* 状态：明牌-排除 (不参与计算，模拟死亡/跳车) */
.calc-row.public-inactive {
    opacity: 0.4;
    text-decoration: line-through;
    border-left: 4px solid #555;
    filter: grayscale(80%);
}

/* 状态：暗牌-选中 (猜测它是暗身份) */
.calc-row.hidden-selected {
    opacity: 1;
    border: 1px solid #00bcd4; /* 亮蓝色边框 */
    box-shadow: 0 0 5px rgba(0, 188, 212, 0.3);
}

/* 状态：暗牌-未选 (默认) */
.calc-row.hidden-default {
    opacity: 0.3;
    border: 1px dashed #666;
}

.calc-role-name {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    width: 60px;
    text-align: center;
    display: inline-block;
}
.calc-row.hidden-disabled {
    opacity: 0.15;
    border: 1px dashed #444;
    cursor: not-allowed;
    background: #111;
}
.mark-select { 
    background: #222; 
    color: #888; 
    border: 1px solid #444; 
    font-size: 0.8em; 
    /* margin-left: 5px;  <-- 移除这个，改用 flex gap */
    border-radius: 3px; 
    max-width: 80px; 
    padding: 1px;
}