.mbfe-root {
	--mbfe-bg: #0a0d16;
	--mbfe-panel: #131826;
	--mbfe-panel2: #1c2338;
	--mbfe-accent: #e0263a;
	--mbfe-accent2: #f2b705;
	--mbfe-blue: #3b82f6;
	--mbfe-green: #2ecc71;
	--mbfe-text: #eef1f8;
	--mbfe-text-dim: #9aa3b8;
	--mbfe-radius: 14px;
	background: radial-gradient(circle at top, #171d31 0%, var(--mbfe-bg) 65%);
	color: var(--mbfe-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	border-radius: var(--mbfe-radius);
	padding: 20px;
	max-width: 1100px;
	margin: 0 auto;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
	line-height: 1.45;
}
.mbfe-root * { box-sizing: border-box; }
.mbfe-loading { text-align: center; padding: 60px 0; color: var(--mbfe-text-dim); font-size: 1.1em; }

.mbfe-title { text-align: center; font-size: 1.8em; font-weight: 800; letter-spacing: 1px; margin: 0 0 6px;
	background: linear-gradient(90deg, var(--mbfe-accent), var(--mbfe-accent2));
	-webkit-background-clip: text; background-clip: text; color: transparent; }
.mbfe-subtitle { text-align: center; color: var(--mbfe-text-dim); margin-bottom: 20px; font-size: .95em; }

.mbfe-card { background: var(--mbfe-panel); border: 1px solid #262e47; border-radius: var(--mbfe-radius); padding: 18px; margin-bottom: 14px; }
.mbfe-card h2 { margin-top: 0; font-size: 1.1em; }
.mbfe-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mbfe-col { flex: 1; min-width: 220px; }

.mbfe-btn { background: linear-gradient(135deg, var(--mbfe-accent), #a5182a); color: #fff; border: none; border-radius: 8px;
	padding: 10px 18px; font-weight: 700; cursor: pointer; font-size: .95em; transition: transform .1s ease, opacity .15s ease; }
.mbfe-btn:hover { transform: translateY(-1px); opacity: .92; }
.mbfe-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.mbfe-btn.secondary { background: var(--mbfe-panel2); border: 1px solid #333c5c; }
.mbfe-btn.gold { background: linear-gradient(135deg, var(--mbfe-accent2), #b3860a); color: #241a00; }

.mbfe-input, .mbfe-select { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid #333c5c;
	background: #0f1422; color: var(--mbfe-text); font-size: .95em; }

.mbfe-players-list { display: flex; flex-direction: column; gap: 8px; }
.mbfe-player-row { display: flex; align-items: center; justify-content: space-between; background: var(--mbfe-panel2);
	border-radius: 10px; padding: 8px 12px; }
.mbfe-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .75em; font-weight: 700; }
.mbfe-badge.ready { background: rgba(46,204,113,.15); color: var(--mbfe-green); }
.mbfe-badge.notready { background: rgba(224,38,58,.15); color: var(--mbfe-accent); }

.mbfe-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mbfe-char-card { background: var(--mbfe-panel2); border: 2px solid transparent; border-radius: 12px; padding: 12px; text-align: center;
	cursor: pointer; transition: border-color .15s ease; }
.mbfe-char-card.selected { border-color: var(--mbfe-accent2); }
.mbfe-char-card.taken { opacity: .35; cursor: not-allowed; }
.mbfe-char-icon { font-size: 2em; }

.mbfe-turn-banner { text-align: center; padding: 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(224,38,58,.2), rgba(242,183,5,.15));
	font-weight: 800; font-size: 1.15em; margin-bottom: 14px; letter-spacing: .5px; }

.mbfe-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.mbfe-space { background: var(--mbfe-panel2); border-radius: 8px; padding: 6px 4px; text-align: center; font-size: .72em;
	position: relative; min-height: 52px; display: flex; flex-direction: column; justify-content: center; }
.mbfe-space.here { outline: 2px solid var(--mbfe-accent2); }
.mbfe-space-type { color: var(--mbfe-text-dim); font-size: .85em; }
.mbfe-space-players { font-size: 1em; margin-top: 2px; }

.mbfe-stat-bar-track { background: #0f1422; border-radius: 6px; height: 10px; overflow: hidden; }
.mbfe-stat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--mbfe-accent), var(--mbfe-accent2)); }

.mbfe-log { max-height: 180px; overflow-y: auto; font-size: .85em; color: var(--mbfe-text-dim); display: flex; flex-direction: column-reverse; gap: 4px; }
.mbfe-log .final { color: var(--mbfe-accent2); font-weight: 700; }
.mbfe-log .levelup { color: var(--mbfe-green); font-weight: 700; }

.mbfe-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.mbfe-modal { background: var(--mbfe-panel); border-radius: var(--mbfe-radius); padding: 22px; max-width: 480px; width: 100%; border: 1px solid #2c3552; }
.mbfe-trivia-opt { display: block; width: 100%; text-align: left; padding: 10px 12px; margin: 6px 0; border-radius: 8px;
	background: var(--mbfe-panel2); border: 1px solid #333c5c; color: var(--mbfe-text); cursor: pointer; }
.mbfe-trivia-opt:hover { border-color: var(--mbfe-accent2); }
.mbfe-trivia-opt.correct { background: rgba(46,204,113,.2); border-color: var(--mbfe-green); }
.mbfe-trivia-opt.wrong { background: rgba(224,38,58,.2); border-color: var(--mbfe-accent); }
.mbfe-diff-tag { text-transform: uppercase; font-size: .7em; letter-spacing: 1px; color: var(--mbfe-accent2); font-weight: 700; }

.mbfe-error { color: var(--mbfe-accent); font-size: .9em; margin-top: 6px; }
@media (max-width: 640px) { .mbfe-board { grid-template-columns: repeat(4, 1fr); } }