/**
 * Mafia host-helper tool styles — local single-device facilitator app.
 */

.bg-mh-app {
	--mh-noir: #1a1420;
	--mh-blood: #b3273f;
	--mh-gold: #e0b34c;
	--mh-panel: #f7f4ee;
	--mh-panel-edge: #d4cfc4;
	--mh-alive: #2e7d4f;
	--mh-alive-bg: #e3f2e9;
	--mh-dead: #9b2c2c;
	--mh-dead-bg: #f5e0e0;
	--mh-town: #3d6bf0;
	--mh-mafia: #b3273f;
	--mh-maniac: #7c3aed;

	min-height: 70vh;
	padding-block: var(--space-md) var(--space-xl);
	background:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(179, 39, 63, 0.1), transparent 55%),
		linear-gradient(180deg, #e7e2dc 0%, var(--bg-surface) 40%);
}

.bg-mh-wrap {
	width: 100%;
}

.bg-mh-loading {
	padding-block: var(--space-xxl);
	text-align: center;
}

.bg-mh-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(20px);
	background-color: var(--mh-noir);
	color: var(--text-inverse);
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--mh-blood);
	box-shadow: var(--shadow-floating);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 2000;
	max-width: 90vw;
	text-align: center;
}

.bg-mh-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.bg-mh-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}

.bg-mh-h1 {
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	color: var(--text-primary);
	margin: 4px 0;
}

.bg-mh-hint {
	color: var(--text-secondary);
	font-size: var(--fs-body);
	margin: 0 0 var(--space-sm);
}

.bg-mh-hint--strong {
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.bg-mh-banner {
	background-color: var(--mh-noir);
	color: var(--text-inverse);
	border-radius: var(--radius-lg);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
	font-weight: var(--fw-medium);
}

.bg-mh-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-lg);
}

@media (max-width: 900px) {
	.bg-mh-grid {
		grid-template-columns: 1fr;
	}
}

.bg-mh-card,
.bg-mh-sidebar {
	background-color: var(--mh-panel);
	border: 1px solid var(--mh-panel-edge);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	box-shadow: var(--shadow-soft);
}

.bg-mh-side__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	margin: var(--space-md) 0 var(--space-sm);
	color: var(--text-primary);
}

.bg-mh-card > .bg-mh-side__title:first-child,
.bg-mh-sidebar > .bg-mh-side__title:first-child {
	margin-top: 0;
}

.bg-mh-card .bg-input,
.bg-mh-card select.bg-input {
	margin-bottom: var(--space-sm);
}

.bg-mh-add-row {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.bg-mh-add-row .bg-input {
	flex: 1;
}

.bg-mh-player-list,
.bg-mh-roster-list,
.bg-mh-vote-list,
.bg-mh-history-list {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.bg-mh-player-row,
.bg-mh-roster-row,
.bg-mh-vote-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 8px 12px;
	background-color: var(--bg-surface-elevated);
	border-radius: var(--radius-sm);
}

.bg-mh-player-name,
.bg-mh-roster-name {
	flex: 1;
	font-weight: var(--fw-medium);
	min-width: 0;
}

.bg-mh-role-select {
	flex: 0 0 160px;
}

.bg-mh-remove {
	background: none;
	border: none;
	color: var(--mh-dead);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 4px;
}

.bg-mh-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-sm);
	cursor: pointer;
}

.bg-mh-roster-row.is-dead {
	opacity: 0.55;
}

.bg-mh-roster-role {
	font-size: 11px;
	font-weight: var(--fw-medium);
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	color: var(--text-inverse);
	background-color: var(--text-secondary);
	flex: 0 0 auto;
}

.bg-mh-roster-role--town {
	background-color: var(--mh-town);
}

.bg-mh-roster-role--mafia {
	background-color: var(--mh-mafia);
}

.bg-mh-roster-role--maniac {
	background-color: var(--mh-maniac);
}

.bg-mh-toggle-alive {
	background-color: transparent;
	border: 1px solid var(--mh-panel-edge);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	font-size: var(--fs-caption);
	cursor: pointer;
	flex: 0 0 auto;
}

.bg-mh-vote-row span {
	flex: 1;
}

.bg-mh-vote-input {
	flex: 0 0 80px;
}

.bg-mh-history-list li {
	font-size: var(--fs-caption);
	color: var(--text-secondary);
	padding: 6px 0;
	border-bottom: 1px dashed var(--mh-panel-edge);
}

.bg-mh-history-list li:last-child {
	border-bottom: none;
}