:root {
	--bg: #0f0f0f;
	--surface: #1c1c1c;
	--border: #333;
	--text: #ddd;
	--text-secondary: #999;
	--red: #e74c3c;
	--blue: #3498db;
	--accent: #8b5cf6;
	--green: #2ecc71;
	--gold: #f0c060;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
	background: var(--bg); color: var(--text);
	font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
	min-height: 100vh; display: flex; justify-content: center; padding: 8px 0 20px 0;
}
.container { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 12px; }
.card-header { font-size: 1rem; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.road-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 2px 0; border-radius: 6px; background: rgba(255,255,255,0.02); }
.road-label { font-weight: 600; min-width: 60px; color: var(--text-secondary); font-size: 0.9rem; }
.road-value { flex: 1; font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.85rem; letter-spacing: 0.5px; }
.road-value-clip {display: inline-block;  max-width: 100%; overflow-x: hidden; white-space: nowrap; direction: rtl; text-align: left; vertical-align: middle;}
.road-value.red { color: var(--red); }
.road-value.blue { color: var(--blue); }
.road-value.gold { color: var(--gold); }
.road-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.three-col { display: flex; gap: 12px; flex: 1; }
.three-col .road-value { flex: 1; text-align: center; }
.final-judgment {
	background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.03));
	border: 1px solid var(--accent); border-radius: 10px; padding: 14px 18px;
	font-size: 1.1rem; font-weight: 700; text-align: center; margin-top: 6px;
}
.final-judgment.red-bg { border-color: var(--red); color: var(--red); }
.final-judgment.blue-bg { border-color: var(--blue); color: var(--blue); }
.db-row { display: flex; gap: 12px; }
.db-row .road-value { flex: 1; text-align: center; }
.header-display { display:none; font-size:0.9rem; margin-left:8px; }
.inputHint { color:#f0c060; font-size:0.85rem; margin-bottom:8px; }
.selectedDisplay { margin:5px 0; font-size:0.9rem; }
.controls-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.controls-row label { font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); min-width: 30px; }
.tableNum { width:45px; background:#222; color:#ddd; border:1px solid #333; border-radius:4px; padding:5px; }
.birthElement { background:#222; color:#ddd; border:1px solid #333; border-radius:4px; padding:5px; }
select { background: #222; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font-size: 0.85rem; cursor: pointer; min-width: 52px; }
select:focus { outline: none; border-color: var(--accent); }
button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 6px 18px; font-weight: 700; cursor: pointer; letter-spacing: 1px; transition: 0.2s; }
button:hover { filter: brightness(1.2); }
button.secondary { background: transparent; margin-left: auto; padding: 5px 10px; border: 1px solid var(--border); color: var(--text); }
.winrate-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.winrate-value { font-size: 1.5rem; font-weight: 800; color: var(--green); }
.winrate-detail { margin-left: auto; font-size: 0.8rem; color: var(--text-secondary); }
.history-list { max-height: 260px; overflow-y: auto; font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.8; padding: 6px; background: rgba(0,0,0,0.25); border-radius: 6px; border: 1px solid var(--border); }
.history-list .P { color: var(--blue); }
.history-list .B { color: var(--red); }
.history-list .T { color: #f0c060; }
.hint { font-size: 0.75rem; color: var(--text-secondary); margin-top: 6px; }
hr { border-color: var(--border); margin: 8px 0; }
.footer { text-align: center; margin-top: 16px; color: #666; font-size: 0.75rem; }
.footer input { background: #111; color: #ddd; border: 1px solid #333; padding: 4px 8px; border-radius: 4px; margin: 0 6px; width: 120px; }
.footer button { background: #333; color: #999; border: 1px solid #444; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.75rem; }
.footer a { color: #666; text-decoration: none; font-size: 0.75rem; display: block; margin-top: 8px; }
.vote-detail { margin-top:12px; padding:10px; background:rgba(0,0,0,0.2); border-radius:8px; font-size:0.75rem; text-align:left; }
.vote-detail .vote-title { font-weight:700; margin-bottom:6px; color:var(--accent); }
.vote-detail .vote-tier { color:#999; margin-top:4px; }
.vote-detail .vote-item { margin-left:12px; }
.vote-detail .vote-result { margin-top:8px; padding-top:6px; border-top:1px solid var(--border); font-weight:700; }
.card nav { display:flex; justify-content:center; gap:15px; flex-wrap:nowrap;font-size:9.5pt; }
.card nav a { color:#8b5cf6;text-decoration:none; }
.card .end-detail { margin-top: 0.5rem; text-align: center; font-size: 0.7rem; letter-spacing: 1px; color: #5b6e8c; border-top: 1px dashed #3a3220; padding-top: 0.5rem; }
.card .end-detail a { color:#8b5cf6;text-decoration:none; }

.pick-row { display:flex; gap:4px; margin:8px 0 0 0; flex-wrap:wrap; justify-content:center;}
.pick-cell { width:28px; height:28px; display:flex; align-items:center; justify-content:center; 
    border:1px solid #555; border-radius:4px; cursor:pointer; font-weight:bold; font-size:1.2rem; font-family: 'Courier New', monospace;	margin-left:0.6rem;}
.pick-cell:hover {  transform: translateY(-3px) rotate(0deg); box-shadow: 0 2px 1px #b97f2e; }
.pick-cell.black { background:#ddd; color:#111; }
.pick-cell.red { background:#ddd; color: #A8001A; }
.pick-cell.selected { border-color:#f0c060; box-shadow:0 0 6px #f0c060; }
.pick-cell.disabled { opacity:0.3; pointer-events:none; }

.header-card {
    font-size:1.2rem;width:25px; height:25px;display: inline-flex;align-items: center;justify-content: center;border: 1px solid #555;border-radius: 4px;
font-weight: bold;font-family: 'Courier New', monospace;background: #ddd;
box-shadow: 1px 2px 0px #b97f2e;	transform: rotate(3deg);	transition: transform 0.2s, box-shadow 0.2s;
}
.header-card:hover {  transform: translateY(-3px) rotate(0deg); box-shadow: 0 2px 3px #b97f2e; }
.header-card.black { color: #1a1a1a; }
.header-card.red { color: #A8001A; }

#btn-back {
	display:none;margin-left:3px;background: #333;color: #ddd;border: 1px solid rgba(245,176,66,0.4);border-radius: 6px;padding: 2px 5px;font-size: 0.8rem;cursor: pointer;
}
#btn-back:hover {    background: rgba(245,176,66,0.15);    border-color: #f5b042;}

@media (max-width: 850px) {
.pick-cell { margin-left:0.2rem;}
}