.mbps-app {
	--mbps-bg: #12151c;
	--mbps-panel: #1b2030;
	--mbps-panel2: #252c42;
	--mbps-text: #e9ecf5;
	--mbps-muted: #9aa3bd;
	--mbps-a: #4f8cff;
	--mbps-b: #ff6b4f;
	--mbps-ban: #e5484d;
	--mbps-pick: #30a46c;
	--mbps-decider: #f5a524;
	box-sizing: border-box;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 16px;
	background: var(--mbps-bg);
	color: var(--mbps-text);
	line-height: 1.4;
}
.mbps-app[data-theme="light"] {
	--mbps-bg: #f4f6fb;
	--mbps-panel: #ffffff;
	--mbps-panel2: #e9edf6;
	--mbps-text: #1b2030;
	--mbps-muted: #5d6784;
}
.mbps-app *, .mbps-app *::before, .mbps-app *::after { box-sizing: border-box; }
.mbps-app h3 { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mbps-muted); }
.mbps-app .by-a { color: var(--mbps-a); }
.mbps-app .by-b { color: var(--mbps-b); }

.mbps-loading, .mbps-error { padding: 16px; text-align: center; color: var(--mbps-muted); }
.mbps-error { color: var(--mbps-ban); }
.mbps-notice { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(229,72,77,.15); border: 1px solid var(--mbps-ban); }

/* header */
.mbps-head { margin-bottom: 16px; }
.mbps-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.mbps-team { padding: 14px 16px; border-radius: 12px; background: var(--mbps-panel); font-size: 1.25rem; font-weight: 700; text-align: center; border: 2px solid transparent; word-break: break-word; }
.mbps-team-a { border-bottom-color: var(--mbps-a); }
.mbps-team-b { border-bottom-color: var(--mbps-b); }
.mbps-team.is-turn { box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.mbps-team-a.is-turn { border-color: var(--mbps-a); }
.mbps-team-b.is-turn { border-color: var(--mbps-b); }
.mbps-vs { text-align: center; display: flex; flex-direction: column; line-height: 1.1; }
.mbps-vs small { color: var(--mbps-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.mbps-role { margin-top: 8px; text-align: center; color: var(--mbps-muted); font-size: .85rem; }

/* banner */
.mbps-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; background: var(--mbps-panel); border-left: 5px solid var(--mbps-muted); }
.mbps-banner.is-ban { border-left-color: var(--mbps-ban); }
.mbps-banner.is-pick { border-left-color: var(--mbps-pick); }
.mbps-banner.is-done { border-left-color: var(--mbps-decider); }
.mbps-banner.is-you { background: var(--mbps-panel2); }
.mbps-stepno { font-size: .75rem; padding: 3px 8px; border-radius: 999px; background: var(--mbps-panel2); color: var(--mbps-muted); white-space: nowrap; }

/* map grid */
.mbps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.mbps-app button.mbps-map {
	position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden;
	border: 3px solid transparent; border-radius: 12px; background: var(--mbps-panel);
	color: var(--mbps-text); text-align: left; font: inherit; text-transform: none; letter-spacing: normal; box-shadow: none;
	cursor: default; transition: transform .12s ease, border-color .12s ease;
}
.mbps-app button.mbps-map:disabled { opacity: 1; }
.mbps-app button.mbps-map.is-clickable { cursor: pointer; }
.mbps-app button.mbps-map.is-clickable:hover { transform: translateY(-3px); border-color: var(--mbps-muted); }
.mbps-app button.mbps-map.is-selected { border-color: var(--mbps-text); transform: translateY(-3px); }
.mbps-map-media { display: block; position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--mbps-panel2), var(--mbps-panel)); }
.mbps-map-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mbps-map-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800; color: var(--mbps-muted); }
.mbps-map-name { display: block; padding: 10px 12px; font-weight: 700; }
.mbps-badge { display: block; padding: 6px 12px 10px; font-size: .78rem; font-weight: 600; }
.mbps-map.is-banned .mbps-map-media { filter: grayscale(1) brightness(.5); }
.mbps-map.is-banned .mbps-map-name { text-decoration: line-through; color: var(--mbps-muted); }
.mbps-map.is-banned { border-color: var(--mbps-ban); }
.mbps-map.is-banned .mbps-map-media::after { content: "\2715"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--mbps-ban); }
.mbps-map.is-picked { border-color: var(--mbps-pick); }
.mbps-map.is-decider { border-color: var(--mbps-decider); }
.mbps-badge.is-ban { color: var(--mbps-ban); }
.mbps-badge.is-pick { color: var(--mbps-pick); }
.mbps-badge.is-decider { color: var(--mbps-decider); }

/* action bar */
.mbps-actionbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; background: var(--mbps-panel); }
.mbps-hint { color: var(--mbps-muted); }
.mbps-actionbar.has-selection .mbps-hint { color: var(--mbps-text); font-weight: 600; }
.mbps-actions { display: inline-flex; gap: 8px; }
.mbps-app button.mbps-btn {
	margin: 0; padding: 10px 18px; border: 0; border-radius: 10px; font: inherit; font-weight: 700;
	text-transform: none; letter-spacing: normal; cursor: pointer; color: #fff; background: var(--mbps-a); box-shadow: none;
}
.mbps-app button.mbps-btn.is-ban { background: var(--mbps-ban); }
.mbps-app button.mbps-btn.is-pick { background: var(--mbps-pick); }
.mbps-app button.mbps-btn.is-ghost { background: var(--mbps-panel2); color: var(--mbps-text); }
.mbps-app button.mbps-btn:disabled { opacity: .55; cursor: not-allowed; }

/* sections */
.mbps-section { padding: 16px; margin-bottom: 16px; border-radius: 12px; background: var(--mbps-panel); }
.mbps-seq, .mbps-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mbps-seq-item { display: grid; grid-template-columns: 28px 1fr 70px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--mbps-panel2); opacity: .6; font-size: .9rem; }
.mbps-seq-item.is-done { opacity: 1; }
.mbps-seq-item.is-current { opacity: 1; outline: 2px solid var(--mbps-text); }
.mbps-seq-no { color: var(--mbps-muted); font-weight: 700; }
.mbps-seq-team { font-weight: 700; }
.mbps-seq-verb { text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; font-weight: 700; }
.mbps-seq-item.is-ban .mbps-seq-verb { color: var(--mbps-ban); }
.mbps-seq-item.is-pick .mbps-seq-verb { color: var(--mbps-pick); }
.mbps-seq-item.is-decider .mbps-seq-verb { color: var(--mbps-decider); }
.mbps-seq-map { font-weight: 600; }

.mbps-result-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--mbps-panel2); }
.mbps-result-item.is-decider { outline: 2px solid var(--mbps-decider); }
.mbps-result-n { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mbps-muted); font-weight: 700; }
.mbps-result-by { font-size: .85rem; }
.mbps-result-actions { margin-top: 12px; }

@media (max-width: 600px) {
	.mbps-app { padding: 12px; }
	.mbps-teams { grid-template-columns: 1fr; }
	.mbps-vs { flex-direction: row; justify-content: center; gap: 8px; align-items: baseline; }
	.mbps-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.mbps-seq-item { grid-template-columns: 24px 1fr 56px; }
	.mbps-seq-map { grid-column: 2 / -1; }
	.mbps-result-item { grid-template-columns: 1fr; }
}