/* BoxManager site look, loaded after style.css on every page that uses header.php.
   Colours and fonts come from theme.css; style.css still provides the page layouts. */

/* ---------- Page ---------- */

html { background: var(--bm-bg); }

/* The colour sits on html; body stays clear so the fixed photo layer (body::before) shows. */
body, body.main, body.events, body.fights {
	background: transparent;
	color: var(--bm-text);
	font-family: var(--bm-font-body);
	text-shadow: none;
}

/* The page photo sits on a fixed layer under the theme overlay (fixed backgrounds break on phones). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--bm-overlay), url("../images/background_main.jpg") center / cover no-repeat;
}
body.events::before { background: var(--bm-overlay), url("../images/background_venue.jpg") center / cover no-repeat; }
body.fights::before { background: var(--bm-overlay), url("../images/background_event.jpg") center / cover no-repeat; }

a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--bm-font-head); letter-spacing: 0.01em; }

::selection { background: rgba(47, 111, 228, 0.35); }

/* ---------- Top bar ---------- */

body header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 4%;
	min-height: 72px;
	background: var(--bm-topbar);
	backdrop-filter: blur(10px);
	border: 0;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	font-family: var(--bm-font-body);
	position: sticky;
	top: 0;
	z-index: 20;
}
body header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 3px;
	background: var(--bm-stripe);
}

#brand { order: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
#brand img { width: 40px; height: 40px; }
.bm-wordmark { font: italic 800 26px/1 var(--bm-font-brand); letter-spacing: -0.01em; }
.bm-wordmark-box { color: var(--bm-red); }
.bm-wordmark-manager { color: var(--bm-blue); }

body header #nav {
	order: 2;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 0 18px;
	padding: 0;
	float: none;
	position: static;
	background: none;
	border: 0;
	box-shadow: none;
	width: auto;
}
body header #nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: var(--bm-muted);
	font: 700 18px/1 var(--bm-font-head);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	float: none;
}
body header #nav a:hover { color: var(--bm-text); background: rgba(var(--bm-surface-rgb), 0.6); }
body header #nav a.selected { color: var(--bm-text); }
body header #nav a.selected::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 3px;
	border-radius: 2px;
	background: var(--bm-stripe);
}

.bm-theme-toggle {
	order: 3;
	display: inline-flex; align-items: center; justify-content: center;
	flex: none;
	width: 40px; height: 40px; padding: 0;
	border-radius: 50%;
	border: 1px solid var(--bm-line);
	background: transparent;
	color: var(--bm-text);
	cursor: pointer;
}
.bm-theme-toggle:hover { border-color: var(--bm-blue); }

/* Account and credits boxes: same hooks as before (main.js opens their tooltips on hover). */
body header #settings, body header #credits {
	position: relative;
	float: none;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--bm-line);
	border-left: 3px solid var(--bm-red);
	border-right: 3px solid var(--bm-blue);
	border-radius: 10px;
	background: rgba(var(--bm-surface-rgb), 0.7);
	font: 700 17px/24px var(--bm-font-head);
	letter-spacing: 0.03em;
	white-space: nowrap;
	flex: none;
}
body header #settings { order: 5; }
body header #credits { order: 6; }

/* Challenges: an icon button between the theme button and the player panel. */
body header #challenges {
	order: 4;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--bm-line);
	background: transparent;
	color: var(--bm-text);
	text-decoration: none;
	font-size: 17px;
	float: none;
	box-shadow: none;
}
body header #challenges:hover { border-color: var(--bm-blue); }
body header #challenges .fa { padding: 0; height: auto; line-height: 1; }
body header #challenges .challenges-tooltip { position: absolute !important; margin-top: 0 !important; }
body header #challenges .challenges-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body header #challenges > .notify { position: absolute; top: -6px; left: -8px !important; right: auto; margin: 0 !important; }
body header #challenges .challenges-tooltip {
	position: absolute;
	top: calc(100% + 10px);
	left: auto !important;
	right: -60px;
	width: 300px;
	padding: 12px 14px;
	text-align: left;
	font: 400 14px/1.4 var(--bm-font-body);
	cursor: default;
	z-index: 30;
}
body header #challenges .challenges-title { margin: 0 0 8px; font: 700 18px/1.2 var(--bm-font-head); text-transform: uppercase; }
body header #settings:hover, body header #credits:hover { background: rgba(var(--bm-surface-rgb), 1); border-top-color: var(--bm-line); border-bottom-color: var(--bm-line); }
body header #settings img { width: 22px; height: auto; margin: 6px 8px 0 0; }
body header #credits img { width: 24px; height: 24px; margin: 0 6px 0 0; }
body header .credits-tooltip, body header .settings-tooltip, body header .challenges-tooltip {
	background: var(--bm-surface-solid);
	border: 1px solid var(--bm-line);
	border-radius: 10px;
	box-shadow: var(--bm-card-shadow);
	color: var(--bm-text);
}
body header .settings-tooltip a { color: var(--bm-text); }

#nav-icon { order: 7; }
#header-login { order: 5; }

/* Notification badges */
/* A circle for one digit that stretches into a pill for two or three. */
#nav .notify, #nav-icon .notify, #challenges .notify, #settings .notify, .notify {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 20px;
	width: auto !important;
	height: 20px !important;
	padding: 0 6px !important;
	border-radius: 999px !important;
	background: var(--bm-red);
	color: #fff;
	border: 0;
	box-shadow: 0 0 0 2px var(--bm-bg);
	text-shadow: none;
	font: 700 11px/1 var(--bm-font-body) !important;
	letter-spacing: 0;
	white-space: nowrap;
}
.pack .notify { min-width: 26px; height: 26px !important; font-size: 13px !important; }

/* Rank badges: "BM" in the brand font instead of the old images, which had white edges for light pages. */
/* The badge sits inline before the text, so a padding set elsewhere (e.g. .options .win) cannot push the text under it. */
.rights { background: none !important; padding-left: 0; }
.rights::before {
	content: "BM";
	display: inline-block;
	margin-right: 6px;
	vertical-align: 1px;
	font: italic 800 15px/1 var(--bm-font-brand);
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	/* The italic B is narrower than the M, so red stops where the B ends. */
	background-image: linear-gradient(90deg, var(--bm-red) 0 44%, var(--bm-blue) 44% 100%);
}
.rights-0::before { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bm-tier-bronze) 70%, #fff), var(--bm-tier-bronze)); }
.rights-1::before { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bm-tier-silver) 60%, #fff), var(--bm-tier-silver)); }
.rights-2::before { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bm-tier-gold) 60%, #fff), var(--bm-tier-gold)); }
.rights-3::before { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bm-tier-platinum) 60%, #fff), var(--bm-tier-platinum)); }

/* Phone and narrow screens: the menu folds into the button (main.js slides it open). */
@media screen and (max-width: 900px) {
	body header { flex-wrap: wrap; padding: 10px 3%; gap: 10px; }
	.bm-wordmark { font-size: 22px; }
	body header #nav {
		order: 10;
		flex: 1 0 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		margin: 4px 0 8px;
		padding: 8px;
		border: 1px solid var(--bm-line);
		border-radius: 12px;
		background: var(--bm-surface-solid);
		position: static;
		width: auto;
	}
	body header #nav a { justify-content: center; padding: 14px; font-size: 20px; margin: 0 !important; display: flex; }
	body header #nav a.selected::after { left: 40%; right: 40%; }
	body header #nav-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		float: none;
		margin: 0 0 0 auto;
		width: 44px !important;
		height: 44px;
		padding: 0 !important;
		border: 1px solid var(--bm-line);
		border-radius: 10px;
		background: rgba(var(--bm-surface-rgb), 0.7);
		box-shadow: none;
		position: relative;
		font-size: 22px;
	}
	body header #settings { order: 3; margin-left: auto; padding: 6px 10px; font-size: 15px; }
	body header #credits { padding: 6px 10px; font-size: 15px; }
	.bm-theme-toggle { order: 2; margin-left: auto; width: 38px; height: 38px; }
	body header #challenges { order: 2; width: 38px; height: 38px; margin: 0 !important; }
	body header #challenges .challenges-tooltip { right: auto; left: -120px !important; width: 280px; }
	body header #settings + .bm-theme-toggle, .loggedin .bm-theme-toggle { margin-left: 0; }
}

/* ---------- Buttons: the red and blue edges are the BoxManager signature ---------- */

.button, button.button, input[type=submit], input[type=button], .ui-dialog .ui-dialog-buttonpane button {
	font-family: var(--bm-font-head) !important;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bm-text);
	background: rgba(var(--bm-surface-rgb), 0.85);
	border: 1px solid var(--bm-line);
	border-left: 3px solid var(--bm-red);
	border-right: 3px solid var(--bm-blue);
	border-radius: 8px;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover, .ui-dialog .ui-dialog-buttonpane button:hover {
	background: rgba(var(--bm-surface-rgb), 1);
	transform: translateY(-1px);
}
#header-login { text-decoration: none; padding: 10px 16px; font-size: 16px; }

/* ---------- Panels, text and forms ---------- */

.panel, .content-sidebar, #sidebar {
	border-radius: var(--bm-radius);
	backdrop-filter: blur(6px);
}
.panel h1, .panel h2 { text-transform: uppercase; }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea {
	background: var(--bm-input);
	color: var(--bm-text);
	border: 1px solid var(--bm-line);
	border-radius: 8px;
	font-family: var(--bm-font-body);
}
input:focus, select:focus, textarea:focus { border-color: var(--bm-blue); outline: none; }
input::placeholder, textarea::placeholder { color: var(--bm-muted); }

.error { color: var(--bm-red); }
.success { color: var(--bm-green); }
p.error, p.success, p.info {
	border-radius: 10px;
	padding: 10px 14px;
	color: var(--bm-text);
}
p.error { background: rgba(229, 55, 58, 0.14); border: 1px solid rgba(229, 55, 58, 0.45); }
p.success { background: rgba(60, 207, 142, 0.14); border: 1px solid rgba(60, 207, 142, 0.45); }
p.info { background: rgba(47, 111, 228, 0.14); border: 1px solid rgba(47, 111, 228, 0.45); }

/* ---------- Boxer cards ---------- */

.card {
	--tier: var(--bm-silver);
	background: linear-gradient(160deg, var(--bm-surface-2), var(--bm-surface-solid) 62%) !important;
	border: 1px solid var(--bm-line);
	border-top: 6px solid var(--tier);
	border-radius: 16px;
	box-shadow: var(--bm-card-shadow);
	text-shadow: none !important;
	overflow: hidden;
}
.card:hover { box-shadow: 0 0 0 1px var(--tier), var(--bm-card-shadow); }
.card a { color: var(--bm-text); }
.card.bronze { --tier: var(--bm-tier-bronze); }
.card.silver { --tier: var(--bm-tier-silver); }
.card.gold { --tier: var(--bm-tier-gold); }
.card.platinum { --tier: var(--bm-tier-platinum); }
.card.prodigy { --tier: var(--bm-tier-prospect); }
.card.champion { --tier: var(--bm-tier-champion); }
.card.legend { --tier: var(--bm-tier-legend); box-shadow: 0 0 40px color-mix(in srgb, var(--bm-tier-legend) 22%, transparent), var(--bm-card-shadow); }
.card .name { font-family: var(--bm-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
/* Tier colour mixed with the text colour, so gold and teal stay readable on white cards too. */
.card .overall { font-family: var(--bm-font-head); font-weight: 800; color: color-mix(in srgb, var(--tier) 72%, var(--bm-text)); }
.card.silver .overall, .card.bronze .overall { color: var(--bm-text); }
.card .division { color: var(--bm-muted); font-size: 15px; letter-spacing: 0.06em; }
.card .skill { font-family: var(--bm-font-head); font-weight: 700; }
.card .skill .label { color: var(--bm-muted); font-family: var(--bm-font-body); font-size: 12px; letter-spacing: 0.08em; }
.card .price { border-radius: 8px; background: rgba(var(--bm-surface-rgb), 1); }
.card-list .injured, .card-list .duplicate { opacity: 0.55; }

/* Event tiles use the same tiers. */
.event-list .event, .event-list li > div { text-shadow: none; }
.event-list .legend, .event-list .gold, .event-list .silver, .event-list .bronze, .event-list .prodigy, .event-list .champion {
	--tier: var(--bm-silver);
	background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--tier) 30%, transparent), transparent 70%), linear-gradient(160deg, var(--bm-surface-2), var(--bm-surface-solid) 62%) !important;
	border: 1px solid var(--bm-line);
	border-top: 6px solid var(--tier);
	border-radius: 16px;
	box-shadow: var(--bm-card-shadow);
}
.event-list .legend { --tier: var(--bm-tier-legend); }
.event-list .gold { --tier: var(--bm-tier-gold); }
.event-list .silver { --tier: var(--bm-tier-silver); }
.event-list .bronze { --tier: var(--bm-tier-bronze); }
.event-list .prodigy { --tier: var(--bm-tier-prospect); }
.event-list .champion { --tier: var(--bm-tier-champion); }

/* ---------- Packs: drawn here, so no boxer names appear in the artwork ---------- */

.pack-list .pack {
	--tier: var(--bm-silver);
	background:
		url("../images/pack-cards.svg") center 34px / 220px auto no-repeat,
		radial-gradient(80% 50% at 50% 22%, color-mix(in srgb, var(--tier) 55%, transparent), transparent 75%),
		linear-gradient(170deg, var(--bm-surface-2), var(--bm-surface-solid) 70%) !important;
	border: 1px solid var(--bm-line);
	border-top: 6px solid var(--tier);
	border-radius: 16px;
	box-shadow: var(--bm-card-shadow);
	text-shadow: none !important;
}
.pack-list .pack a { color: var(--bm-text); }
.pack-list .pack .title { font-family: var(--bm-font-head); font-size: 26px; text-transform: uppercase; }
.pack-list .pack .content { color: var(--bm-muted); }
/* Drawn packs: title under the card fan, no gap above the description (that gap was for the old artwork). */
.pack-list .pack:not(.skips):not(.useable) a { padding-top: 196px; }
.pack-list .pack:not(.skips):not(.useable) .content { padding: 4px 10px 6px; min-height: 58px; }
.pack-list .bronze { --tier: var(--bm-tier-bronze); }
.pack-list .silver { --tier: var(--bm-tier-silver); }
.pack-list .gold { --tier: var(--bm-tier-gold); }
.pack-list .legend { --tier: var(--bm-tier-legend); }
.pack-list .prodigy { --tier: var(--bm-tier-prospect); }
.pack-list .champion { --tier: var(--bm-tier-champion); }
.pack-list .member { --tier: var(--bm-red); }
.pack-list .middle, .pack-list .light, .pack-list .welter { --tier: var(--bm-blue); }
/* Skip and usable packs keep their light artwork (no boxers on it), so their text stays dark in both themes. */
.pack-list .skips a, .pack-list .useable a, .pack-list .skips .content, .pack-list .useable .content { color: #131a26 !important; }
.pack-list .skips { --tier: var(--bm-blue); background: url("../images/pack_skips.png") center / cover no-repeat !important; }
.pack-list .useable { --tier: var(--bm-green); background: url("../images/pack_useable.png") center / cover no-repeat !important; }

/* ---------- jQuery UI dialogs and widgets ---------- */

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--bm-font-body); }
.ui-widget-content {
	background: var(--bm-surface-solid);
	color: var(--bm-text);
	border: 1px solid var(--bm-line);
}
.ui-widget-content a { color: var(--bm-text); }
.ui-widget-header {
	background: var(--bm-surface-2);
	color: var(--bm-text);
	border: 0;
	border-bottom: 1px solid var(--bm-line);
}
.ui-dialog { border-radius: var(--bm-radius); box-shadow: var(--bm-card-shadow); padding: 0; overflow: hidden; }
/* The stripe is a background: jQuery UI's title bar uses ::after to clear its floated title. */
.ui-dialog .ui-dialog-titlebar {
	border-radius: 0;
	padding: 12px 16px 14px;
	font: 700 22px/1.2 var(--bm-font-head);
	text-transform: uppercase;
	background: var(--bm-stripe) left bottom / 100% 3px no-repeat, var(--bm-surface-2);
}
.ui-dialog .ui-dialog-buttonpane { background: var(--bm-surface-solid); border-top: 1px solid var(--bm-line); }
.ui-dialog .ui-dialog-titlebar-close {
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--bm-muted) !important;
	top: 10px !important;
	right: 10px !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(var(--bm-surface-rgb), 1) !important; color: var(--bm-text) !important; }
.ui-widget-overlay { background: #05070b; opacity: 0.7; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	background: rgba(var(--bm-surface-rgb), 0.85);
	color: var(--bm-text);
	border: 1px solid var(--bm-line);
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
	background: rgba(var(--bm-surface-rgb), 1);
	color: var(--bm-text);
	border-color: var(--bm-blue);
}
.ui-state-active, .ui-widget-content .ui-state-active { background: var(--bm-blue); color: #fff; border-color: var(--bm-blue); }
.ui-tooltip { background: var(--bm-surface-solid); color: var(--bm-text); border: 1px solid var(--bm-line); box-shadow: var(--bm-card-shadow); }

/* ---------- Footer ---------- */

footer, footer.footer, footer.fixed {
	background: var(--bm-topbar);
	backdrop-filter: blur(10px);
	color: var(--bm-muted);
	border-top: 1px solid var(--bm-line);
	box-shadow: none;
	text-shadow: none;
}
footer a { color: var(--bm-muted); }
footer a:hover { color: var(--bm-text); }

/* ---------- Fight bar: a fight still playing, on every page ---------- */

.fight-live {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 60;
	width: min(560px, calc(100% - 24px));
	transform: translate(-50%, 140%);
	padding: 10px 14px 12px;
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	background: var(--bm-stripe) left top / 100% 3px no-repeat, var(--bm-surface-solid);
	box-shadow: var(--bm-card-shadow);
	color: var(--bm-text);
	font: 400 14px/1.4 var(--bm-font-body);
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.fight-live.fight-live-in { transform: translate(-50%, 0); }
.fight-live.fight-live-out { transform: translate(-50%, 140%); opacity: 0; }
.fight-live-head { display: flex; align-items: center; gap: 10px; }
.fight-live-round { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(var(--bm-surface-rgb), 1); border: 1px solid var(--bm-line); font: 700 14px/1.4 var(--bm-font-head); letter-spacing: 0.04em; text-transform: uppercase; }
.fight-live-names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.2 var(--bm-font-head); text-transform: uppercase; }
.fight-live-names .fl-boxer { color: var(--bm-red); }
.fight-live-names .fl-opponent { color: var(--bm-blue); }
.fight-live-vs { color: var(--bm-muted); font-weight: 600; text-transform: none; }
.fight-live-score { flex: none; font: 800 20px/1 var(--bm-font-head); }
.fight-live-toggle {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0; border-radius: 50%;
	border: 1px solid var(--bm-line); background: transparent; color: var(--bm-text); cursor: pointer;
}
.fight-live-toggle .bm-chevron { transform: rotate(90deg); transition: transform 0.2s; }
.fight-live-collapsed .fight-live-toggle .bm-chevron { transform: rotate(-90deg); }
.fight-live-trend { position: relative; height: 8px; margin: 9px 0 0; border-radius: 4px; background: var(--bm-blue); overflow: hidden; }
.fight-live-red { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--bm-red); border-right: 2px solid var(--bm-surface-solid); transition: width 1.5s ease; }
.fight-live-body { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.fight-live-comment { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fight-live-comment .red { color: var(--bm-red); font-weight: 600; }
.fight-live-comment .blue { color: var(--bm-blue); font-weight: 600; }
.fight-live-link { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--bm-muted); font-weight: 600; text-decoration: none; }
.fight-live-link:hover { color: var(--bm-text); }
.fight-live-collapsed .fight-live-body { display: none; }
.fight-live-flash { box-shadow: 0 0 0 2px var(--bm-gold), var(--bm-card-shadow); }
.fight-live-won { box-shadow: 0 0 0 2px var(--bm-green), var(--bm-card-shadow); }
.fight-live-lost { box-shadow: 0 0 0 2px var(--bm-red), var(--bm-card-shadow); }
.fight-live-finished .fight-live-comment { white-space: normal; font-weight: 600; }
#fight-minimise { text-align: center; margin: 8px 0; }
@media (prefers-reduced-motion: reduce) {
	.fight-live, .fight-live-red, .fight-live-toggle .bm-chevron { transition: none; }
}

/* ---------- Loading spinners: the old GIF was made for light pages ---------- */

.loading { background: rgba(var(--bm-surface-rgb), 0.7) url("../images/spinner.svg") center / 52px no-repeat !important; }
/* The page-load overlay covers the screen, so the spinner sits in the middle of it however short the page is. */
#content > .loading { position: fixed; inset: 0; width: auto; height: auto; z-index: 50; }

/* ---------- Cookie bar ---------- */

#cookie-bar { background: var(--bm-surface-solid) !important; color: var(--bm-text) !important; border-top: 1px solid var(--bm-line); }

@media (prefers-reduced-motion: reduce) {
	.button, input[type=submit], input[type=button] { transition: none; }
	.button:hover, input[type=submit]:hover, input[type=button]:hover { transform: none; }
}

/* Chance labels: small like the card's stat labels, so a long fraction stays on one line. */
.options .win, .options .lose { white-space: nowrap; }
.options .odds-label { margin-right: 4px; color: var(--bm-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.data-label { font-size: 12px; white-space: nowrap; }

/* Chat: the window and the /chat page share this. */
#chat { height: 360px; overflow-y: auto; padding: 4px 2px; overscroll-behavior: contain; }
#chat .chat-row { margin: 0; padding: 6px 10px; border: 0; border-left: 3px solid transparent; border-radius: 6px; background: none; box-shadow: none; }
#chat .chat-row:hover { background: rgba(var(--bm-surface-rgb), 0.5); }
#chat .chat-row.own { border-left-color: var(--bm-blue); background: color-mix(in srgb, var(--bm-blue) 8%, transparent); }
#chat .message, #content #chat p { margin: 0; padding: 0; border: 0; background: none; line-height: 1.45; overflow-wrap: anywhere; }
#chat .name { display: inline; font-weight: 700; }
#chat .name a { color: var(--bm-text); text-decoration: none; }
#chat .time { float: right !important; width: auto; margin-left: 8px; padding: 0; color: var(--bm-muted); font-size: 12px; }
#chat .text { display: block; color: var(--bm-text); }
#chat .text a { color: var(--bm-blue); }
#chat .chat-delete { float: right; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--bm-line); border-radius: 4px; background: none; color: var(--bm-muted); font-size: 11px; text-transform: uppercase; cursor: pointer; }
#chat .chat-delete:hover { border-color: var(--bm-red); color: var(--bm-red); }
#chat .chat-empty, #content #chat .chat-empty { padding: 20px 10px; color: var(--bm-muted); text-align: center; }
#chat-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 10px; }
#chat-form .chat-status { flex: 1 0 100%; }
#chat-form .chat-status:empty { display: none; }
#chat-form .chat-status p { margin: 0; }
#chat-form textarea { flex: 1 1 0; width: auto !important; min-width: 0; margin: 0; resize: vertical; }
#chat-form #chat-submit { flex: 0 0 auto; width: auto; margin: 0; padding: 0 20px !important; }
#content #chat-form .chat-status p { padding: 8px 12px; }
#chat-dialog #chat { height: auto; min-height: 220px; max-height: 55vh; }

/* ---------- Fight arena: the ring behind the fight window, lit in the event's tier colour (js/fight.js) ---------- */
#arena { --tier: var(--bm-tier-bronze); position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; transition: opacity 0.6s ease; }
#arena.tier-silver { --tier: var(--bm-tier-silver); }
#arena.tier-gold { --tier: var(--bm-tier-gold); }
#arena.tier-legend { --tier: var(--bm-tier-legend); }
#arena.tier-prospect { --tier: var(--bm-tier-prospect); }
#arena.tier-champion { --tier: var(--bm-tier-champion); }
#arena.leaving { opacity: 0; }
body.arena-on .ui-widget-overlay { background: none; opacity: 0; }
body.arena-on .ui-dialog.fight-ui { z-index: 102 !important; transition: opacity 0.6s ease; }
body.arena-on #mute-button, body.arena-on #chat-button { z-index: 105; }

#arena .arena-photo { position: absolute; inset: -2%; background: #0b0f17 url("../images/background_event.jpg") center 70% / cover no-repeat; transform: scale(1.02); transition: transform 1.2s ease; }
#arena .arena-tint { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--tier) 34%, transparent), transparent 70%); mix-blend-mode: screen; }
#arena .arena-dim { position: absolute; inset: 0; background: #05070b; opacity: 0.5; transition: opacity 1.2s ease; }
:root[data-theme="light"] #arena .arena-dim { background: #1a2233; }
#arena.arena-rest .arena-dim { opacity: 0.7; }
#arena.arena-lost .arena-dim { opacity: 0.8; }
#arena.arena-won .arena-dim { opacity: 0.22; }
#arena.arena-won .arena-photo { transform: scale(1.06); }

/* Spotlights: at the start and end of each round they sweep in from the stands, then hold on the ring. */
#arena .arena-beams i { position: absolute; top: -6%; width: 15vw; min-width: 80px; height: 125%; margin-left: -7.5vw; transform-origin: 50% 0; transform: rotate(var(--to, 0deg)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, color-mix(in srgb, var(--tier) 22%, rgba(255, 255, 255, 0.45)) 38%, rgba(255, 255, 255, 0.08) 72%, transparent 88%); clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); filter: blur(8px); mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s ease; }
#arena .arena-beams i:nth-child(1) { left: 6%; }
#arena .arena-beams i:nth-child(2) { left: 31%; }
#arena .arena-beams i:nth-child(3) { left: 69%; }
#arena .arena-beams i:nth-child(4) { left: 94%; }
#arena.lights-on .arena-beams i { opacity: 0.55; }
#arena.lights-on.arena-rest .arena-beams i { opacity: 0.34; }
#arena.lights-on.arena-won .arena-beams i { opacity: 0.75; }
#arena .arena-beams i.sweep { animation: beam-sweep 2.8s cubic-bezier(.25, .7, .25, 1) forwards; }
@keyframes beam-sweep { 0% { transform: rotate(var(--from, 30deg)); } 60% { transform: rotate(calc(var(--to, 0deg) - (var(--from, 30deg) - var(--to, 0deg)) * 0.08)); } 100% { transform: rotate(var(--to, 0deg)); } }
/* Where the spotlights meet: a pool of light on the canvas. */
#arena .arena-pool { position: absolute; left: 50%; top: 74%; width: 70vw; height: 22vh; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.4), color-mix(in srgb, var(--tier) 18%, transparent) 55%, transparent); mix-blend-mode: screen; opacity: 0; transition: opacity 1.6s ease 1.2s; }
#arena.lights-on .arena-pool { opacity: 1; }
#arena.lights-on.arena-rest .arena-pool { opacity: 0.5; }

/* Camera flashes from the stands. */
#arena .cam { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 26px 8px rgba(255, 255, 255, 0.35); opacity: 0; animation: cam-flash 0.42s ease-out forwards; }
@keyframes cam-flash { 0% { opacity: 0; transform: scale(0.4); } 12% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(0.8); } }

/* Hits glow on the side that landed: your boxer (red) on the left, the opponent (blue) on the right. */
#arena .arena-hit { position: absolute; top: 0; bottom: 0; width: 55%; opacity: 0; transition: opacity 0.5s ease; }
#arena .arena-hit.red { left: 0; background: radial-gradient(60% 60% at 0% 50%, rgba(229, 57, 53, 0.55), transparent 70%); }
#arena .arena-hit.blue { right: 0; background: radial-gradient(60% 60% at 100% 50%, rgba(47, 111, 228, 0.6), transparent 70%); }
#arena .arena-hit.on { opacity: 1; transition-duration: 0.08s; }
#arena .arena-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#arena .arena-flash.on { animation: arena-flash 0.9s ease-out; }
@keyframes arena-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* The crowd: more rows for a bigger draw. Bodies run off the bottom of the screen so a jump shows no edge. */
#arena .arena-crowd { position: absolute; left: -3%; right: -3%; bottom: 0; top: 0; }
#arena .crowd-row { position: absolute; left: 0; right: 0; display: flex; align-items: flex-end; justify-content: space-between; }
#arena .crowd-row.r0 { bottom: 0; height: 13vh; min-height: 72px; max-height: 128px; }
#arena .crowd-row.r1 { bottom: 6vh; height: 10vh; min-height: 56px; max-height: 100px; filter: brightness(0.75); }
#arena .crowd-row.r2 { bottom: 11vh; height: 8vh; min-height: 44px; max-height: 80px; filter: brightness(0.55); }
#arena .fan { position: relative; flex: 1 1 0; height: 100%; margin: 0 -0.4%; transform-origin: 50% 100%; }
#arena .fan.empty { visibility: hidden; }
#arena .fan::before { content: ""; position: absolute; left: 50%; bottom: 42%; width: 34%; max-width: 30px; aspect-ratio: 0.86; transform: translateX(-50%); border-radius: 50% 50% 46% 46%; background: #06080d; box-shadow: 0 -2px 6px -2px color-mix(in srgb, var(--tier) 70%, #fff); }
#arena .fan::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -140%; height: 190%; border-radius: 46% 46% 0 0 / 20% 20% 0 0; background: #06080d; box-shadow: 0 -2px 8px -3px color-mix(in srgb, var(--tier) 60%, #fff); }
#arena .fan.up { animation: fan-jump 0.55s ease-out var(--d, 0s) 2; }
#arena .arena-crowd.celebrate .fan { animation: fan-jump 0.6s ease-out var(--d, 0s) infinite; }
@keyframes fan-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-24%); } }
#arena .arena-emoji { position: absolute; bottom: 10vh; font-size: 30px; line-height: 1; z-index: 2; animation: emoji-rise 2.6s ease-out forwards; }
@keyframes emoji-rise { 0% { transform: translateY(0) scale(0.4) rotate(0); opacity: 0; } 12% { opacity: 1; transform: translateY(-6vh) scale(1.15) rotate(var(--r, 8deg)); } 100% { transform: translateY(-46vh) scale(0.9) rotate(calc(var(--r, 8deg) * -1)); opacity: 0; } }

/* The fight window over the arena. */
.ui-dialog.fight-ui { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--tier, #888) 35%, transparent), 0 0 46px -10px var(--tier, transparent); }
.ui-dialog.fight-ui.hit-red { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), -14px 0 40px -8px rgba(229, 57, 53, 0.8); }
.ui-dialog.fight-ui.hit-blue { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 14px 0 40px -8px rgba(47, 111, 228, 0.85); }
.ui-dialog.fight-ui.shake { animation: fight-shake 0.5s cubic-bezier(.36, .07, .19, .97); }
@keyframes fight-shake { 10%, 90% { transform: translate(-2px, 0); } 20%, 80% { transform: translate(4px, 1px); } 30%, 50%, 70% { transform: translate(-7px, -1px); } 40%, 60% { transform: translate(7px, 1px); } }
#fight-dialog { position: relative; }

/* Round calls sit over the commentary line, never over the scores or the names. */
#fight-banner { position: absolute; left: 50%; top: 0; z-index: 5; padding: 8px 28px; border-radius: 999px; background: linear-gradient(90deg, var(--bm-red), var(--bm-blue)); color: #fff; font: italic 800 28px/1.1 var(--bm-font-brand); letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 26px -4px var(--tier, transparent); pointer-events: none; opacity: 0; transform: translateX(-50%); }
#fight-banner.on { animation: banner-in 1.9s ease-out forwards; }
@keyframes banner-in { 0% { opacity: 0; transform: translateX(-50%) scale(1.5); } 18% { opacity: 1; transform: translateX(-50%) scale(1); } 78% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(0.96); } }

/* Title fights show the belt large above the names. */
#fight-belt { margin: 4px 0 10px; text-align: center; }
#fight-belt img { display: block; width: 150px; height: auto; margin: 0 auto 2px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px color-mix(in srgb, var(--tier, #c90) 55%, transparent)); }
#fight-belt span { font: 700 15px/1.2 var(--bm-font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tier, var(--bm-text)); }
body.arena-on #fight-dialog .versus .title { display: none; }

#fight-stats { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 2px; font-size: 13px; color: var(--bm-muted); }
#fight-stats b { color: var(--bm-text); font: 700 17px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; margin: 0 3px 0 8px; }
#fight-stats b:first-child { margin-left: 0; }
#fight-stats .blue { text-align: right; }
#fight-end.fx-result { animation: result-pop 0.7s cubic-bezier(.2, 1.4, .4, 1); }
#fight-end.fx-result #fight-result.success { box-shadow: 0 0 0 1px var(--tier, #2e7d32), 0 0 34px -6px var(--tier, #2e7d32); }
@keyframes result-pop { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Title fight introductions: the belt, the red corner, the blue corner, then both. */
body.intro-on .ui-dialog.fight-ui { opacity: 0; pointer-events: none; }
#fight-intro { position: fixed; inset: 0; z-index: 104; display: flex; align-items: center; justify-content: center; padding: 0 16px 18vh; color: #fff; text-align: center; }
#fight-intro .intro-slide { position: absolute; left: 16px; right: 16px; top: 22vh; opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.2, .9, .3, 1); }
#fight-intro .intro-slide.on { opacity: 1; transform: none; }
#fight-intro .intro-red.on, #fight-intro .intro-blue.on { transform: none; }
#fight-intro .intro-red { transform: translateX(-40px); }
#fight-intro .intro-blue { transform: translateX(40px); }
#fight-intro .intro-kicker { display: block; margin-bottom: 10px; font: 700 16px/1.2 var(--bm-font-head); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
#fight-intro strong { display: block; font: italic 800 clamp(34px, 7vw, 76px)/1 var(--bm-font-brand); letter-spacing: 0.01em; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.8); }
#fight-intro .intro-red strong { color: #ff5a55; }
#fight-intro .intro-blue strong { color: #5a92ff; }
#fight-intro .intro-meta { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); font-size: 15px; }
#fight-intro .intro-meta img { width: 24px; height: auto; }
#fight-intro .intro-belt img { display: block; width: min(320px, 70vw); height: auto; margin: 0 auto 12px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px color-mix(in srgb, var(--tier, #c90) 60%, transparent)); }
#fight-intro .intro-belt strong { font-size: clamp(26px, 5vw, 52px); color: var(--tier, #fff); }
#fight-intro .intro-vs strong { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 18px; font-size: clamp(26px, 5vw, 56px); }
#fight-intro .intro-vs .red { color: #ff5a55; }
#fight-intro .intro-vs .blue { color: #5a92ff; }
#fight-intro .intro-vs em { font-size: 0.6em; color: #fff; opacity: 0.9; }
#fight-intro .intro-skip { position: absolute; left: 50%; bottom: calc(14vh + 24px); transform: translateX(-50%); padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 13px; cursor: pointer; }
#fight-intro .intro-skip:hover { background: rgba(0, 0, 0, 0.7); }

@media (max-width: 600px) { #arena .arena-photo { background-position: 50% 45%; } }
@media (prefers-reduced-motion: reduce) {
	#arena .arena-beams i.sweep, #arena .fan, #arena .arena-crowd.celebrate .fan, .ui-dialog.fight-ui.shake, #fight-banner.on, #arena .cam { animation: none !important; }
	#fight-banner.on { opacity: 1; }
}

/* Event pages take the event's tier colour, with the ring showing through more than on other pages. */
body.event-tier { --tier: var(--bm-tier-bronze); }
body.event-tier-silver { --tier: var(--bm-tier-silver); }
body.event-tier-gold { --tier: var(--bm-tier-gold); }
body.event-tier-legend { --tier: var(--bm-tier-legend); }
body.event-tier-prospect { --tier: var(--bm-tier-prospect); }
body.event-tier-champion { --tier: var(--bm-tier-champion); }
body.event-tier::before {
	background:
		radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 72%),
		linear-gradient(180deg, color-mix(in srgb, var(--bm-bg) 62%, transparent) 0%, color-mix(in srgb, var(--bm-bg) 70%, transparent) 55%, color-mix(in srgb, var(--bm-bg) 86%, transparent) 100%),
		url("../images/background_event.jpg") center 70% / cover no-repeat;
}
body.event-tier #content.panel { background: rgba(var(--bm-surface-rgb), 0.25); backdrop-filter: none; box-shadow: none; }
body.event-tier #event-title { position: relative; border-top: 3px solid var(--tier); background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 18%, transparent), transparent 80%), rgba(var(--bm-surface-rgb), 0.7); }

/* Admin rename on the boxer profile. */
.boxer-rename { max-width: 420px; margin: 0 auto 16px; text-align: left; }
.boxer-rename summary { cursor: pointer; color: var(--bm-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.boxer-rename form { display: flex; gap: 8px; margin-top: 10px; }
.boxer-rename input[type=text] { flex: 1 1 0; min-width: 0; }
.boxer-rename input[type=submit] { flex: 0 0 auto; width: auto; padding: 0 16px !important; }
#content .boxer-rename .note { margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--bm-muted); font-size: 12px; text-align: center; }

/* Admin rename on the boxer profile. */
.boxer-rename { max-width: 420px; margin: 0 auto 16px; text-align: left; }
.boxer-rename summary { cursor: pointer; color: var(--bm-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.boxer-rename form { display: flex; gap: 8px; margin-top: 10px; }
.boxer-rename input[type=text] { flex: 1 1 0; min-width: 0; }
.boxer-rename input[type=submit] { flex: 0 0 auto; width: auto; padding: 0 16px !important; }
#content .boxer-rename .note { margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--bm-muted); font-size: 12px; text-align: center; }

/* ---------- Card sliders (js/card-slider.js) ---------- */
.bm-slider { position: relative; margin: 0 auto; }
.bm-track { display: flex; align-items: flex-start; margin: 0; padding: 6px 0 10px; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.bm-track::-webkit-scrollbar { display: none; }
.bm-track:focus-visible { box-shadow: inset 0 0 0 2px var(--bm-blue); border-radius: var(--bm-radius); }
.bm-track > li { flex: 0 0 auto; padding: 10px 14px; scroll-snap-align: start; content-visibility: auto; contain-intrinsic-size: auto 340px auto 420px; }
.bm-slider.bm-dragging .bm-track { scroll-snap-type: none; cursor: grabbing; }
.bm-slider.bm-dragging .bm-track a { cursor: grabbing; }
.bm-prev, .bm-next { position: absolute; top: calc(50% - 16px); z-index: 3; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: -23px; padding: 0; border: 1px solid var(--bm-line-hi); border-radius: 50%; background: rgba(var(--bm-surface-rgb), 0.88); color: var(--bm-text); font-size: 20px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); transition: opacity 0.2s ease, background 0.2s ease; }
.bm-prev { left: 6px; border-left: 3px solid var(--bm-red); }
.bm-next { right: 6px; border-right: 3px solid var(--bm-blue); }
.bm-prev:hover, .bm-next:hover { background: rgba(var(--bm-surface-rgb), 1); }
.bm-slider.bm-single .bm-prev, .bm-slider.bm-single .bm-next { opacity: 0; pointer-events: none; }
.bm-status { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 380px; margin: 0 auto 6px; padding: 0 16px; color: var(--bm-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.bm-bar { flex: 1 1 auto; height: 4px; border-radius: 4px; background: var(--bm-line); overflow: hidden; }
.bm-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--bm-red), var(--bm-blue)); transition: width 0.15s ease; }
.bm-more:empty, .bm-slider.bm-single .bm-status { display: none; }
.bm-slider.bm-loading .bm-more::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; background: url("../images/spinner.svg") center / contain no-repeat; }
.paging.bm-paging-done { display: none; }
@media (hover: none) { .bm-prev, .bm-next { width: 40px; height: 40px; margin-top: -20px; } }

/* ---------- Live notifications (js/main.js) ---------- */
#bm-toasts { position: fixed; top: 112px; right: 16px; z-index: 120; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.bm-toast { position: relative; pointer-events: auto; border: 1px solid var(--bm-line-hi); border-left: 3px solid var(--bm-red); border-right: 3px solid var(--bm-blue); border-radius: 12px; background: rgba(var(--bm-surface-rgb), 0.97); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateX(24px); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2, .9, .3, 1.2); }
.bm-toast.in { opacity: 1; transform: none; }
.bm-toast.out { opacity: 0; transform: translateX(24px); }
.bm-toast-body { display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 14px; color: var(--bm-text); text-decoration: none; }
.bm-toast-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-size: 20px; color: #fff; background: var(--bm-blue); }
.bm-toast-sold .bm-toast-icon { background: #2e9e5b; }
.bm-toast-pack .bm-toast-icon { background: var(--bm-tier-gold); color: #1a1406; }
.bm-toast-text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; }
.bm-toast-text b { display: block; font-family: var(--bm-font-head); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.bm-toast-text span { color: var(--bm-muted); }
.bm-toast-go { flex: 0 0 auto; color: var(--bm-muted); }
.bm-toast-close { position: absolute; top: 8px; right: 8px; display: flex; padding: 4px; border: 0; background: none; color: var(--bm-muted); font-size: 12px; cursor: pointer; }
.bm-toast-close:hover { color: var(--bm-text); }
@media (max-width: 600px) { #bm-toasts { top: auto; bottom: 16px; right: 16px; } }

/* ---------- Dashboard (home/index.php) ---------- */
.dashboard { text-align: left; }
.dashboard h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: 0.04em; text-align: left; }
.dashboard h3 { margin: 18px 0 10px; font-size: 15px; color: var(--bm-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.dashboard section { margin-bottom: 22px; }
#content.dashboard p { margin: 0; padding: 0; border: 0; background: none; }
#content.dashboard h1, #content.dashboard h2, #content.dashboard h3 { width: auto; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
#content.dashboard h2 { margin: 0 0 12px; font-size: 20px; }
#content.dashboard h3 { margin: 18px 0 10px; font-size: 15px; color: var(--bm-muted); }
.dash-empty { color: var(--bm-muted); }
.dash-hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: var(--bm-radius); border-left: 3px solid var(--bm-red); border-right: 3px solid var(--bm-blue); background: linear-gradient(100deg, color-mix(in srgb, var(--bm-red) 10%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--bm-blue) 10%, transparent)), rgba(var(--bm-surface-rgb), 0.75); }
.dash-hello h1 { margin: 0 0 4px; font-size: 30px; text-align: left; }
.dash-hello p { color: var(--bm-muted); }
.dash-hello p strong { color: var(--bm-text); }
.dash-record { display: flex; gap: 18px; }
.dash-record span { display: flex; flex-direction: column; align-items: center; min-width: 54px; color: var(--bm-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.dash-record b { color: var(--bm-text); font: 700 28px/1.1 var(--bm-font-head); }
.dash-todo ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dash-todo a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border: 1px solid var(--bm-line); border-left: 3px solid var(--bm-blue); border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.7); color: var(--bm-text); text-decoration: none; transition: background 0.2s ease; }
.dash-todo a:hover { background: rgba(var(--bm-surface-rgb), 1); }
.dash-todo-injury a, .dash-todo-fitness a { border-left-color: var(--bm-red); }
.dash-todo-event a { border-left-color: var(--bm-tier-gold); }
.dash-todo-pack a { border-left-color: var(--bm-tier-gold); }
.dash-todo-sold a { border-left-color: #2e9e5b; }
.dash-todo-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--bm-muted); font: 700 14px/1 var(--bm-font-head); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.dash-best .bm-slider { margin: 0 -10px; }
#content.dashboard .dash-more { margin-top: 4px; text-align: center; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.dash-panel { padding: 18px; border: 1px solid var(--bm-line); border-radius: var(--bm-radius); background: rgba(var(--bm-surface-rgb), 0.7); }
#content.dashboard .dash-big { margin-bottom: 12px; color: var(--bm-muted); }
.dash-big b { color: var(--bm-text); font: 700 34px/1 var(--bm-font-head); margin-right: 4px; }
.dash-tiers, .dash-items, .dash-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dash-tier { --tier: var(--bm-tier-bronze); display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 8px; border-top: 3px solid var(--tier); background: color-mix(in srgb, var(--tier) 12%, transparent); }
.dash-tier.tier-silver { --tier: var(--bm-tier-silver); }
.dash-tier.tier-gold { --tier: var(--bm-tier-gold); }
.dash-tier.tier-platinum { --tier: var(--bm-tier-platinum); }
.dash-tier.tier-prodigy { --tier: var(--bm-tier-prospect); }
.dash-tier.tier-champion { --tier: var(--bm-tier-champion); }
.dash-tier.tier-legend { --tier: var(--bm-tier-legend); }
.dash-tier b, .dash-items b, .dash-titles b { font: 700 24px/1.1 var(--bm-font-head); color: var(--bm-text); }
.dash-tier span, .dash-items span, .dash-titles span { color: var(--bm-muted); font-size: 12px; text-align: center; }
.dash-tier.none, .dash-titles .none { opacity: 0.45; }
.dash-items a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--bm-line); border-radius: 8px; color: var(--bm-text); text-decoration: none; }
.dash-items a:hover { background: rgba(var(--bm-surface-rgb), 1); }
.dash-items img { width: 26px; height: 26px; }
.dash-objectives ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dash-obj-head, .dash-obj-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.dash-obj-head span:first-child::first-letter { text-transform: uppercase; }
.dash-obj-left, .dash-obj-foot { color: var(--bm-muted); font-size: 12px; }
.dash-obj-foot img { width: 16px; height: 16px; vertical-align: -3px; }
.dash-obj-bar { height: 8px; margin: 6px 0 4px; border-radius: 8px; background: var(--bm-line); overflow: hidden; }
.dash-obj-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--bm-red), var(--bm-blue)); }
.dash-titles li { display: flex; flex-direction: column; align-items: center; }
.dash-titles img { width: 56px; height: auto; }
.dash-events { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dash-events li { --tier: var(--bm-tier-bronze); }
.dash-events li.tier-silver { --tier: var(--bm-tier-silver); }
.dash-events li.tier-gold { --tier: var(--bm-tier-gold); }
.dash-events li.tier-legend { --tier: var(--bm-tier-legend); }
.dash-events li.tier-prospect { --tier: var(--bm-tier-prospect); }
.dash-events li.tier-champion { --tier: var(--bm-tier-champion); }
.dash-events a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-left: 3px solid var(--tier); border-radius: 8px; background: color-mix(in srgb, var(--tier) 8%, transparent); color: var(--bm-text); text-decoration: none; font-size: 14px; }
.dash-ev-name img { width: 18px; vertical-align: -2px; }
.dash-ev-result { color: var(--bm-muted); }
.dash-ev-bank img { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 600px) {
	.dash-hello h1 { font-size: 24px; }
	.dash-todo a { flex-direction: column; align-items: flex-start; gap: 6px; }
	.dash-events a { grid-template-columns: 1fr auto; }
	.dash-ev-result { grid-column: 1 / -1; order: 3; }
}

/* ---------- Gym (gym/index.php, gym bar in header.php, js/main.js) ---------- */
.gym-page { text-align: left; }
#content.gym-page p { margin: 0 0 12px; padding: 0; border: 0; background: none; }
#content.gym-page p.success, #content.gym-page p.error { padding: 10px 14px; }
#content.gym-page h2 { width: auto; margin: 0 0 12px; padding: 0; border: 0; background: none; font-size: 20px; text-align: left; }
#content.gym-page h2 span { margin-left: 8px; color: var(--bm-muted); font: 400 14px/1 var(--bm-font-body); text-transform: none; }
.gym-intro, .gym-note, .gym-about, .gym-none { color: var(--bm-muted); }
.gym-slots, .gym-start { margin-bottom: 24px; }
.gym-slots-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gym-slots ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gym-slot { --gym: var(--bm-blue); display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--bm-line); border-top: 3px solid var(--gym); border-radius: var(--bm-radius); background: rgba(var(--bm-surface-rgb), 0.75); }
.gym-slot.gym-recovery { --gym: #2e9e5b; }
.gym-slot.gym-rehab { --gym: var(--bm-red); }
.gym-slot.empty { --gym: var(--bm-line-hi); border-style: dashed; border-top-style: solid; background: none; }
.gym-slot.ready { box-shadow: 0 0 0 1px var(--gym), 0 0 26px -6px var(--gym); }
.gym-slot-type { color: var(--gym); font: 700 13px/1 var(--bm-font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.gym-slot.empty .gym-slot-type { color: var(--bm-muted); }
.gym-slot-name { font: 700 20px/1.15 var(--bm-font-head); text-transform: uppercase; }
.gym-slot.empty .gym-slot-name { color: var(--bm-muted); font: 400 14px/1.3 var(--bm-font-body); text-transform: none; }
.gym-slot-gain { color: var(--bm-muted); font-size: 14px; }
.gym-slot-bar { height: 8px; border-radius: 8px; background: var(--bm-line); overflow: hidden; }
.gym-slot-bar i { display: block; width: 0; height: 100%; border-radius: 8px; background: var(--gym); transition: width 1s linear; }
.gym-slot.ready .gym-slot-bar i { width: 100% !important; }
.gym-slot-time { font: 700 16px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; }
.gym-slot form { margin: 4px 0 0; }
.gym-slot .gym-collect { width: 100%; }
.gym-stop button { padding: 0; border: 0; background: none; color: var(--bm-muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.gym-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gym-tabs a { padding: 8px 14px; border: 1px solid var(--bm-line); border-radius: 999px; color: var(--bm-text); font: 700 15px/1 var(--bm-font-head); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.gym-tabs a span { margin-left: 4px; color: var(--bm-muted); }
.gym-tabs a.selected { border-color: var(--bm-blue); background: color-mix(in srgb, var(--bm-blue) 16%, transparent); }
.gym-boxers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gym-boxers li { --tier: var(--bm-tier-bronze); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--bm-line); border-left: 3px solid var(--tier); border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.7); }
.gym-boxers li.tier-silver { --tier: var(--bm-tier-silver); }
.gym-boxers li.tier-gold { --tier: var(--bm-tier-gold); }
.gym-boxers li.tier-platinum { --tier: var(--bm-tier-platinum); }
.gym-boxers li.tier-prodigy { --tier: var(--bm-tier-prospect); }
.gym-boxers li.tier-champion { --tier: var(--bm-tier-champion); }
.gym-boxers li.tier-legend { --tier: var(--bm-tier-legend); }
.gym-boxer { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-width: 200px; }
.gym-boxer img { grid-row: span 2; width: 24px; }
.gym-boxer-name { font: 700 17px/1.2 var(--bm-font-head); text-transform: uppercase; }
.gym-boxer-name b { margin-left: 4px; color: var(--tier); }
.gym-boxer-info { color: var(--bm-muted); font-size: 13px; }
.gym-lengths { display: flex; flex-wrap: wrap; gap: 6px; }
.gym-lengths form { margin: 0; }
.gym-lengths button { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 6px 10px; border: 1px solid var(--bm-line-hi); border-radius: 8px; background: rgba(var(--bm-surface-rgb), 0.9); color: var(--bm-text); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.gym-lengths button:hover { border-color: var(--bm-blue); background: color-mix(in srgb, var(--bm-blue) 12%, rgba(var(--bm-surface-rgb), 0.9)); }
.gym-lengths b { font: 700 14px/1.2 var(--bm-font-head); text-transform: uppercase; }
.gym-lengths span { color: var(--bm-muted); font-size: 12px; }
.gym-cost img { width: 13px; height: 13px; vertical-align: -2px; }

/* The gym bar: a chip at the bottom left that opens into a list. */
.gym-live { position: fixed; left: 16px; bottom: 16px; z-index: 61; width: min(330px, calc(100vw - 32px)); color: var(--bm-text); font: 400 14px/1.4 var(--bm-font-body); transition: opacity 0.3s ease, transform 0.3s ease; }
.gym-live.gone { opacity: 0; transform: translateY(20px); }
.gym-live-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--bm-line-hi); border-left: 3px solid var(--bm-blue); border-radius: 999px; background: var(--bm-surface-solid); color: var(--bm-text); box-shadow: var(--bm-card-shadow); font: 700 14px/1.2 var(--bm-font-head); letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; }
.gym-live.has-ready .gym-live-chip { border-left-color: #2e9e5b; animation: gym-ready 2s ease-in-out infinite; }
@keyframes gym-ready { 0%, 100% { box-shadow: var(--bm-card-shadow), 0 0 10px -4px #2e9e5b; } 50% { box-shadow: var(--bm-card-shadow), 0 0 24px 0 #2e9e5b; } }
.gl-icon { display: flex; font-size: 18px; color: var(--bm-blue); }
.gym-live.has-ready .gl-icon { color: #2e9e5b; }
.gl-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-toggle { display: flex; }
.gl-toggle .bm-chevron { transform: rotate(-90deg); transition: transform 0.2s ease; }
.gym-live.open .gl-toggle .bm-chevron { transform: rotate(90deg); }
.gym-live-list { display: none; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--bm-line); border-radius: var(--bm-radius); background: var(--bm-surface-solid); box-shadow: var(--bm-card-shadow); }
.gym-live.open { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.gym-live.open .gym-live-list { display: block; width: 100%; box-sizing: border-box; }
.gl-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--bm-line); }
.gl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-type { color: var(--bm-muted); font-size: 12px; text-align: right; }
.gl-bar { height: 5px; border-radius: 5px; background: var(--bm-line); overflow: hidden; align-self: center; }
.gl-bar i { display: block; height: 100%; background: var(--bm-blue); }
.gl-row.ready .gl-bar i { background: #2e9e5b; }
.gl-time { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
.gl-row.ready .gl-time { color: #2e9e5b; font-weight: 700; }
.gl-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.gl-actions a { display: inline-flex; align-items: center; gap: 2px; color: var(--bm-muted); font-weight: 600; text-decoration: none; }
.gl-collect { padding: 6px 14px !important; }
.bm-toast-gym .bm-toast-icon { background: var(--bm-blue); }
@media (max-width: 760px) { .gym-live.with-fight { bottom: 150px; } }
.dash-todo-gym a { border-left-color: #2e9e5b; }

/* ---------- Limited events (events.php, events-lib.php) ---------- */
.limited-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.limited-list .event { --tier: var(--bm-tier-bronze); height: 100%; border: 1px solid var(--bm-line); border-top: 3px solid var(--tier); border-radius: var(--bm-radius); background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 70%), rgba(var(--bm-surface-rgb), 0.85); box-shadow: var(--bm-card-shadow); }
.limited-list .event.tier-silver { --tier: var(--bm-tier-silver); }
.limited-list .event.tier-gold { --tier: var(--bm-tier-gold); }
.limited-list .event a { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 16px 14px; color: var(--bm-text); text-align: center; text-decoration: none; box-sizing: border-box; }
.limited-period { padding: 3px 10px; border-radius: 999px; background: var(--tier); color: #111; font: 700 12px/1.2 var(--bm-font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.limited-list .name { margin: 2px 0 0; font: 700 22px/1.1 var(--bm-font-head); text-transform: uppercase; }
.limited-where { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }
.limited-where img { width: 26px; height: auto; }
.limited-boost { padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, #2e9e5b 18%, transparent); color: var(--bm-text); font-size: 13px; font-weight: 600; }
.limited-list .content { color: var(--bm-muted); font-size: 13px; }
.limited-time { margin-top: auto; color: var(--bm-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.limited-time b { color: var(--bm-text); }
.limited-list .entered { opacity: 0.7; }
.limited-list .entered .credits { display: none; }
#event-title .limited-boost { margin-left: 6px; vertical-align: middle; text-transform: none; font-family: var(--bm-font-body); }
.dash-todo-limited a { border-left-color: var(--bm-tier-gold); }

/* Dashboard layout. Phones: one column with what needs attention near the top.
   Wide screens: welcome, stable and record on the left; needs attention and objectives on the right. */
.dashboard .dash-top { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.dashboard .dash-top section { margin-bottom: 0; }
.dash-main, .dash-side { display: contents; }
.dash-hello { order: 1; }
.dash-todo { order: 2; }
.dash-collection { order: 3; }
.dash-objectives { order: 4; }
.dash-profile { order: 5; }
#content.dashboard h3.dash-first { margin-top: 0; }
a.dash-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-bottom: 12px; color: var(--bm-muted); text-decoration: none; }
a.dash-big:hover .dash-big-go { color: var(--bm-text); }
.dash-big-go { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--bm-muted); font: 700 13px/1 var(--bm-font-head); letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 1000px) {
	.dashboard .dash-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
	.dash-main, .dash-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
	.dash-tiers, .dash-items { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.dash-titles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.dash-titles img { width: 46px; }
	.dash-hello { flex-wrap: nowrap; }
}

/* ---------- Pack opening (js/pack-reveal.js) ---------- */
body.pack-revealing { overflow: hidden; }
#pack-reveal { --tier: var(--bm-tier-bronze); --s: 0.62; position: fixed; inset: 0; z-index: 130; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--tier) 22%, #0b0f17), #05070b 75%); transition: opacity 0.4s ease; }
#pack-reveal.leaving { opacity: 0; }
#pack-reveal.pr-tier-silver { --tier: var(--bm-tier-silver); }
#pack-reveal.pr-tier-gold { --tier: var(--bm-tier-gold); }
#pack-reveal.pr-tier-platinum { --tier: var(--bm-tier-platinum); }
#pack-reveal.pr-tier-prodigy { --tier: var(--bm-tier-prospect); }
#pack-reveal.pr-tier-champion { --tier: var(--bm-tier-champion); }
#pack-reveal.pr-tier-legend { --tier: #fff; }
.pr-glow { position: absolute; left: 50%; top: 45%; width: 90vmin; height: 90vmin; transform: translate(-50%, -50%) scale(0.4); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tier) 70%, transparent), transparent); opacity: 0; transition: opacity 1.4s ease, transform 1.4s ease; pointer-events: none; }
#pack-reveal.shaking .pr-glow { opacity: 0.7; transform: translate(-50%, -50%) scale(0.8); }
#pack-reveal.opened .pr-glow { opacity: 0.35; transform: translate(-50%, -50%) scale(1.3); }
.pr-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#pack-reveal.opened .pr-flash { animation: pr-flash 0.7s ease-out; }
@keyframes pr-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* The pack. */
.pr-pack { position: absolute; left: 50%; top: 45%; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%); transition: transform 0.5s cubic-bezier(.5, -0.4, .6, 1.5), opacity 0.4s ease; }
.pr-pack-art { width: 210px; height: 290px; border: 2px solid color-mix(in srgb, var(--tier) 70%, #fff); border-radius: 18px; background: url("../images/pack-cards.svg") center 46px / 170px auto no-repeat, linear-gradient(160deg, color-mix(in srgb, var(--tier) 45%, #1b2333), #0d121c 70%); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 50px -10px var(--tier); }
.pr-pack-label { color: #fff; font: 700 18px/1 var(--bm-font-head); letter-spacing: 0.14em; text-transform: uppercase; }
#pack-reveal.shaking .pr-pack { animation: pr-shake 1.6s ease-in forwards; }
@keyframes pr-shake { 0% { transform: translate(-50%, -50%) rotate(0); } 15% { transform: translate(-51%, -50%) rotate(-2deg); } 30% { transform: translate(-49%, -50%) rotate(2deg); } 45% { transform: translate(-52%, -51%) rotate(-4deg) scale(1.03); } 60% { transform: translate(-48%, -49%) rotate(4deg) scale(1.05); } 75% { transform: translate(-53%, -50%) rotate(-6deg) scale(1.08); } 90% { transform: translate(-47%, -50%) rotate(6deg) scale(1.1); } 100% { transform: translate(-50%, -50%) rotate(0) scale(1.12); } }
#pack-reveal.opened .pr-pack { animation: none; opacity: 0; transform: translate(-50%, -50%) scale(1.6); pointer-events: none; }

/* The cards: dealt from the middle into a row, then turned over. */
.pr-cards { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1100px; }
.pr-cards.many { --s: 0.5; }
.pr-card { width: calc(300px * var(--s)); height: calc(400px * var(--s)); perspective: 900px; opacity: 0; transform: translateY(40px) scale(0.6); transition: opacity 0.35s ease calc(var(--i) * 0.08s), transform 0.5s cubic-bezier(.2, 1.3, .4, 1) calc(var(--i) * 0.08s); cursor: pointer; }
#pack-reveal.dealt .pr-card { opacity: 1; transform: none; }
.pr-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.3, 1.2, .4, 1); }
.pr-card.flipped .pr-inner { transform: rotateY(180deg); }
.pr-back, .pr-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; }
.pr-back { border: 2px solid color-mix(in srgb, var(--tier) 60%, #fff); background: url("../images/icon-128.png") center / 34% auto no-repeat, repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 10px, transparent 10px 20px), linear-gradient(160deg, #1d2638, #0b0f17); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.pr-face { transform: rotateY(180deg); overflow: visible; }
.pr-face > .card { width: 300px; height: 400px; margin: 0; transform: scale(var(--s)); transform-origin: top left; pointer-events: none; }
.pr-card.pr-rare .pr-face { box-shadow: 0 0 0 2px var(--card-tier, var(--tier)), 0 0 40px 4px var(--card-tier, var(--tier)); animation: pr-rare 1.2s ease-out; }
.pr-card.pr-tier-gold { --card-tier: var(--bm-tier-gold); }
.pr-card.pr-tier-platinum { --card-tier: var(--bm-tier-platinum); }
.pr-card.pr-tier-prodigy { --card-tier: var(--bm-tier-prospect); }
.pr-card.pr-tier-champion { --card-tier: var(--bm-tier-champion); }
.pr-card.pr-tier-legend { --card-tier: #fff; }
@keyframes pr-rare { 0% { transform: rotateY(180deg) scale(1); } 30% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(180deg) scale(1); } }
.pr-spark { position: absolute; z-index: 3; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px var(--tier); pointer-events: none; animation: pr-spark 1.2s ease-out forwards; }
@keyframes pr-spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

.pr-actions { position: relative; z-index: 2; display: flex; gap: 12px; }
.pr-skip { padding: 8px 18px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; }
.pr-done { display: none; }
#pack-reveal.done .pr-done { display: inline-block; }
#pack-reveal.done .pr-skip { display: none; }
@media (max-width: 600px) {
	#pack-reveal { --s: 0.42; justify-content: flex-start; padding-top: 40px; overflow-y: auto; }
	.pr-cards.many { --s: 0.36; }
	.pr-cards { gap: 10px; }
	.pr-pack { top: 40%; }
	.pr-pack-art { width: 170px; height: 235px; background-size: 140px auto, auto; }
}
@media (prefers-reduced-motion: reduce) {
	#pack-reveal.shaking .pr-pack, .pr-card.pr-rare .pr-face, #pack-reveal.opened .pr-flash { animation: none; }
}

/* Fight rewards (js/fight.js FightFX.rewards). */
.fx-coin { position: fixed; z-index: 140; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; animation: fx-coin 1.4s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes fx-coin { 0% { transform: translate(0, 0) scale(0.6) rotate(0); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(200deg); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) * 0.3)) scale(0.8) rotate(320deg); opacity: 0; } }
#fight-title.fx-belt img { position: relative; animation: fx-belt 1.3s cubic-bezier(.2, 1.3, .4, 1) 0.8s both; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tier, #e0a92a) 80%, transparent)); }
@keyframes fx-belt { 0% { transform: perspective(400px) rotateY(-540deg) scale(0.3); opacity: 0; } 70% { transform: perspective(400px) rotateY(20deg) scale(1.25); opacity: 1; } 100% { transform: none; opacity: 1; } }
#fight-level.fx-level { display: inline-block; animation: fx-level 1s ease-out 2; border-radius: 8px; }
@keyframes fx-level { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0); } 50% { box-shadow: 0 0 22px 4px rgba(46, 158, 91, 0.7); transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fx-coin { display: none; } #fight-title.fx-belt img, #fight-level.fx-level { animation: none; } }

/* Getting started (home/index.php, quests-lib.php) and the tutorial tips (js/main.js). */
.dash-quests { order: 2; border-top: 3px solid var(--bm-tier-gold); }
.dash-quests-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash-quests-head span { color: var(--bm-muted); font-size: 13px; }
.dash-quest-list { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.dash-quest-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.6); }
.dash-quest-list li.done { opacity: 0.6; }
.dq-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--bm-line-hi); border-radius: 50%; font: 700 14px/1 var(--bm-font-head); }
.dash-quest-list li.done .dq-mark { border-color: #2e9e5b; background: #2e9e5b; color: #fff; }
.dq-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.dq-text span { color: var(--bm-muted); font-size: 13px; }
.dq-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; color: var(--bm-muted); font: 700 13px/1 var(--bm-font-head); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.dq-go:hover { color: var(--bm-text); }
#content.dashboard .dq-reward { color: var(--bm-muted); font-size: 13px; }
.dq-claim input { width: 100%; }
.dq-skip { margin-top: 8px; text-align: right; }
.dq-skip button { padding: 0; border: 0; background: none; color: var(--bm-muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.bm-tip { position: fixed; right: 16px; bottom: 16px; z-index: 125; width: min(360px, calc(100vw - 32px)); padding: 16px 18px 14px; border: 1px solid var(--bm-line-hi); border-top: 3px solid var(--bm-tier-gold); border-radius: var(--bm-radius); background: var(--bm-surface-solid); color: var(--bm-text); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2, .9, .3, 1.2); }
.bm-tip.in { opacity: 1; transform: none; }
.bm-tip-kicker { color: var(--bm-tier-gold); font: 700 12px/1 var(--bm-font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.bm-tip h4 { margin: 4px 0 6px; font: 700 20px/1.1 var(--bm-font-head); text-transform: uppercase; }
.bm-tip p { margin: 0 0 12px; color: var(--bm-muted); font-size: 14px; line-height: 1.45; }
.bm-tip-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bm-tip-skip { padding: 0; border: 0; background: none; color: var(--bm-muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.bm-tip-ok { padding: 8px 18px !important; }
.quest-line { display: block; padding: 6px 0; color: var(--bm-tier-gold); font-size: 13px; }

/* ---------- Phone header: one row of logo and round buttons, one row with you and your credits ---------- */
@media screen and (max-width: 760px) {
	body header { height: auto !important; min-height: 0; padding: 8px 12px 10px; gap: 8px; column-gap: 8px; }
	body header::before { content: ""; order: 5; flex: 0 0 100%; height: 0; }
	#brand { order: 1; flex: 1 1 auto; min-width: 0; gap: 8px; }
	#brand img { width: 34px; height: 34px; }
	.bm-wordmark { font-size: 21px; }
	.bm-theme-toggle { order: 2; margin: 0 !important; width: 38px; height: 38px; }
	body header #challenges { order: 3; width: 38px !important; height: 38px !important; padding: 0 !important; margin: 0 !important; font-size: 16px !important; line-height: 1 !important; }
	body header #nav-icon { order: 4; margin: 0 !important; width: 40px !important; height: 40px; font-size: 20px; }
	body header #settings, body header #credits { margin: 0 !important; padding: 6px 10px !important; font-size: 15px !important; line-height: 22px !important; }
	body header #settings { order: 6; flex: 1 1 auto; min-width: 0; }
	body header #credits { order: 7; flex: 0 0 auto; }
	body header #settings > a { display: flex; align-items: center; min-width: 0; }
	body header #settings img { margin: 0 8px 0 0 !important; }
	body header #settings .notify { margin-left: auto !important; }
	body header #credits img { width: 22px; height: 22px; }
	body header #header-login { order: 4; }
	body header #nav { order: 10; }
	body header #challenges .challenges-tooltip { position: fixed !important; top: 64px; left: 12px !important; right: 12px; width: auto; margin: 0 !important; }
}
@media screen and (max-width: 360px) {
	.bm-wordmark { font-size: 18px; }
	#brand img { width: 30px; height: 30px; }
}
@media screen and (max-width: 640px) {
	.dash-best .bm-slider { margin: 0; }
}
@media screen and (max-width: 400px) {
	.bm-track > li { padding: 10px 6px; }
}
@media screen and (max-width: 600px) {
	/* style.css makes these full width on phones; count the padding in so they never stick out. */
	a.button, input[type=submit], input[type=button] { box-sizing: border-box; max-width: min(300px, 100%); }
}
@media screen and (max-width: 900px) {
	/* In the folded menu the counts sit right after each item's name. */
	body header #nav a .notify { position: static !important; margin: 0 0 0 8px !important; transform: none; }
}
@media screen and (max-width: 900px) {
	body header #nav { box-sizing: border-box; max-width: 100%; }
}
@media screen and (max-width: 900px) {
	/* style.css pads these for its old phone header; keep them round and level. */
	body header #challenges { width: 38px !important; height: 38px !important; padding: 0 !important; margin: 0 !important; font-size: 16px !important; line-height: 1 !important; }
	body header #settings, body header #credits { margin-top: 0 !important; }
}
@media screen and (max-width: 600px) {
	/* Old pages set fixed widths on some fields and embeds; keep them inside the screen. */
	#content input[type=text], #content input[type=email], #content input[type=password], #content input[type=number], #content input[type=search], #content select, #content textarea, #content iframe { max-width: 100%; box-sizing: border-box; }
}

/* ---------- Sign-up and log-in band for visitors (access.php) ---------- */
.bm-join-band { margin: 28px auto 24px; padding: 32px 4% 36px; max-width: 1100px; box-sizing: border-box; text-align: left; }
.bm-join-title { margin-bottom: 24px; text-align: center; }
.bm-join-title h2 { margin: 0; font: 700 clamp(32px, 4.4vw, 48px)/1 var(--bm-font-head); text-transform: uppercase; }
.bm-join-title h2::after { content: ""; display: block; width: 90px; height: 4px; margin: 14px auto 0; border-radius: 2px; background: var(--bm-stripe); }
.bm-join-title p { max-width: 34em; margin: 14px auto 0; color: var(--bm-muted); font-size: 17px; }
.bm-join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bm-join-panel { padding: 24px; border: 1px solid var(--bm-line); border-top: 3px solid var(--bm-red); border-radius: var(--bm-radius); background: rgba(var(--bm-surface-rgb), 0.85); box-shadow: var(--bm-card-shadow); }
.bm-join-back { border-top-color: var(--bm-blue); }
.bm-join-panel h3 { margin: 0 0 6px; font: 700 24px/1.1 var(--bm-font-head); text-transform: uppercase; }
.bm-join-panel > p { margin: 0 0 16px; color: var(--bm-muted); }
.bm-join-panel form { display: flex; flex-direction: column; gap: 0; }
.bm-join-panel label { margin: 0 0 5px; color: var(--bm-muted); font-size: 13px; font-weight: 600; }
.bm-join-panel input[type=text], .bm-join-panel input[type=email], .bm-join-panel input[type=password] { width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 11px 12px; font-size: 16px; }
.bm-join-panel .bm-join-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; color: var(--bm-text); font-weight: 400; }
.bm-join-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100% !important; max-width: none !important; padding: 13px 16px !important; font-size: 17px; }
.bm-join-link { margin-top: 10px; color: var(--bm-muted); font-size: 14px; text-align: center; }
@media (max-width: 760px) { .bm-join-grid { grid-template-columns: 1fr; } .bm-join-band { padding: 24px 16px; } }

/* ---------- Rankings board (rankings-board.php): Fibonacci spiral of the top seven, then the list ---------- */
#rankings.rk-wide { float: none; width: auto; max-width: 1100px; margin: 0 auto; }
.rk-board { text-align: left; }
.rk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#content .rk-head h2 { width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 26px; }
.rk-head h2 span { display: block; margin-top: 4px; color: var(--bm-muted); font: 400 14px/1.3 var(--bm-font-body); text-transform: none; }
.rk-you { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--bm-blue) 18%, transparent); color: var(--bm-text); font: 700 14px/1.2 var(--bm-font-head); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.rk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-chip { padding: 7px 13px; border: 1px solid var(--bm-line); border-radius: 999px; color: var(--bm-muted); font: 700 14px/1 var(--bm-font-head); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.rk-chip:hover { color: var(--bm-text); border-color: var(--bm-line-hi); }
.rk-chip.on { border-color: var(--bm-blue); background: color-mix(in srgb, var(--bm-blue) 18%, transparent); color: var(--bm-text); }
.rk-chip.off { opacity: 0.55; }
.rk-filters select { min-width: 180px; }
.rk-find { display: flex; gap: 6px; max-width: 360px; margin: 0 0 18px; }
.rk-find input { flex: 1 1 auto; min-width: 0; }
.rk-find button { width: auto !important; padding: 0 14px !important; font-size: 16px; }
#content .rk-empty, #content .rk-note { padding: 0; border: 0; background: none; color: var(--bm-muted); }
#content .rk-note { margin: 6px 0 0; font-size: 13px; }

.rk-spiral { position: relative; display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(13, 1fr); gap: 6px; aspect-ratio: 21 / 13; margin: 0 0 22px; }
.rk-curve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.rk-curve path { fill: none; stroke: color-mix(in srgb, var(--bm-tier-gold) 70%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 5; }
.rk-curve-tall { display: none; }
.rk-tile { --tier: var(--bm-tier-bronze); position: relative; container-type: size; display: flex; flex-direction: column; justify-content: flex-end; gap: 2%; overflow: hidden; padding: 6% 7%; box-sizing: border-box; border: 1px solid var(--bm-line); border-top: 3px solid var(--tier); border-radius: 12px; background: radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 70%), rgba(var(--bm-surface-rgb), 0.9); color: var(--bm-text); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.rk-tile:hover { transform: translateY(-2px); box-shadow: var(--bm-card-shadow), 0 0 0 1px var(--tier); }
.rk-tile.me { box-shadow: 0 0 0 2px var(--bm-blue); }
.rk-tile.tier-silver { --tier: var(--bm-tier-silver); }
.rk-tile.tier-gold { --tier: var(--bm-tier-gold); }
.rk-tile.tier-platinum { --tier: var(--bm-tier-platinum); }
.rk-t1 { grid-column: 1 / span 13; grid-row: 1 / span 13; }
.rk-t2 { grid-column: 14 / span 8; grid-row: 1 / span 8; }
.rk-t3 { grid-column: 17 / span 5; grid-row: 9 / span 5; }
.rk-t4 { grid-column: 14 / span 3; grid-row: 11 / span 3; }
.rk-t5 { grid-column: 14 / span 2; grid-row: 9 / span 2; }
.rk-t6 { grid-column: 16 / span 1; grid-row: 9 / span 1; }
.rk-t7 { grid-column: 16 / span 1; grid-row: 10 / span 1; }
.rk-pos { position: absolute; top: 4cqmin; right: 6cqmin; font: 800 32cqmin/0.9 var(--bm-font-head); color: color-mix(in srgb, var(--tier) 80%, var(--bm-text)); opacity: 0.9; }
.rk-avatar { position: relative; display: flex; align-items: center; justify-content: center; width: 26cqmin; height: 26cqmin; margin-bottom: auto; border: 2px solid var(--tier); border-radius: 50%; background: color-mix(in srgb, var(--tier) 22%, rgba(var(--bm-surface-rgb), 1)); font: 800 11cqmin/1 var(--bm-font-head); }
.rk-avatar img { position: absolute; right: -8%; bottom: -4%; width: 42%; height: auto; border-radius: 2px; box-shadow: 0 0 0 2px var(--bm-surface-solid); }
.rk-name { overflow: hidden; font: 700 10cqmin/1.05 var(--bm-font-head); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rk-score { color: var(--bm-muted); font-size: 6.5cqmin; }
.rk-score b { color: var(--bm-text); font: 700 9cqmin/1 var(--bm-font-head); }
.rk-meta { color: var(--bm-muted); font-size: 5cqmin; }
@container (max-width: 150px) {
	.rk-avatar, .rk-meta { display: none; }
	.rk-pos { position: static; font-size: 30cqmin; }
	.rk-name { font-size: 15cqmin; }
	.rk-score { font-size: 11cqmin; }
	.rk-score b { font-size: 15cqmin; }
}
@container (max-width: 80px) {
	.rk-tile { justify-content: center; align-items: center; padding: 0; }
	.rk-name, .rk-score { display: none; }
	.rk-pos { font-size: 55cqmin; }
}

.rk-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bm-line); }
.rk-list li { border-bottom: 1px solid var(--bm-line); }
.rk-list li.me { background: color-mix(in srgb, var(--bm-blue) 12%, transparent); }
.rk-list a { display: grid; grid-template-columns: 3.2em 24px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; color: var(--bm-text); text-decoration: none; }
.rk-list a:hover { background: rgba(var(--bm-surface-rgb), 0.7); }
.rk-l-pos { color: var(--bm-muted); font: 700 16px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; text-align: right; }
.rk-list img { width: 24px; height: auto; }
.rk-l-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rk-l-meta { color: var(--bm-muted); font-size: 13px; }
.rk-l-score { min-width: 4.5em; font: 700 18px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; text-align: right; }
.rk-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 0; color: var(--bm-muted); }
.rk-pages .button { display: inline-flex; align-items: center; gap: 4px; width: auto !important; }

@media (max-width: 700px) {
	.rk-spiral { grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(21, 1fr); aspect-ratio: 13 / 21; gap: 4px; }
	.rk-curve-wide { display: none; }
	.rk-curve-tall { display: block; }
	.rk-t1 { grid-column: 1 / span 13; grid-row: 1 / span 13; }
	.rk-t2 { grid-column: 1 / span 8; grid-row: 14 / span 8; }
	.rk-t3 { grid-column: 9 / span 5; grid-row: 17 / span 5; }
	.rk-t4 { grid-column: 11 / span 3; grid-row: 14 / span 3; }
	.rk-t5 { grid-column: 9 / span 2; grid-row: 14 / span 2; }
	.rk-t6 { grid-column: 9 / span 1; grid-row: 16 / span 1; }
	.rk-t7 { grid-column: 10 / span 1; grid-row: 16 / span 1; }
	.rk-tile { border-radius: 8px; }
	.rk-list a { grid-template-columns: 2.6em 22px 1fr auto; gap: 8px; }
	.rk-l-meta { display: none; }
	.rk-filters select { min-width: 0; width: 100%; }
}
@media screen and (max-width: 760px) {
	body header #header-login { order: 3; width: auto !important; max-width: none !important; margin: 0 !important; padding: 8px 14px !important; }
}

/* Sparring income panel (home/index.php, idle-lib.php) */
.dash-idle { order: 6; border-top: 3px solid #2e9e5b; }
#content.dashboard .dash-idle-amount { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.dash-idle-amount img { width: 26px; height: 26px; }
.dash-idle-amount b { font: 700 30px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; }
.dash-idle-amount span { color: var(--bm-muted); }
.dash-idle .dash-obj-bar i { background: linear-gradient(90deg, #2e9e5b, var(--bm-tier-gold)); }
#content.dashboard .dash-idle-note { margin: 6px 0 10px; color: var(--bm-muted); font-size: 13px; }
.dash-idle-claim { width: 100%; }
.dash-idle-claim:disabled { opacity: 0.5; cursor: default; }
@media screen and (max-width: 600px) {
	/* Admin names page: one boxer per block instead of a wide table. */
	table.names, table.names tbody, table.names tr, table.names td { display: block; width: 100%; box-sizing: border-box; }
	table.names tr:first-child { display: none; }
	table.names tr { padding: 10px 0; border-bottom: 1px solid var(--bm-line); }
	table.names td { padding: 2px 0; }
	table.names td:first-child { font-weight: 700; }
	table.names form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
	table.names form input[type=text] { flex: 1 1 60%; }
	table.names form input[type=submit] { flex: 0 0 auto; width: auto !important; padding: 8px 14px !important; }
	table.names .versions::before { content: "Cards "; color: var(--bm-muted); }
}

/* ---------- Daily login reward (footer.php) ---------- */
body.dr-open { overflow: hidden; }
.dr { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 7, 11, 0.72); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.35s ease; }
.dr.in { opacity: 1; }
.dr-box { position: relative; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 26px 24px 22px; border: 1px solid var(--bm-line-hi); border-top: 3px solid var(--bm-tier-gold); border-radius: 18px; background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--bm-tier-gold) 22%, transparent), transparent 70%), var(--bm-surface-solid); color: var(--bm-text); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); transform: translateY(24px) scale(0.96); transition: transform 0.45s cubic-bezier(.2, 1.2, .4, 1); }
.dr.in .dr-box { transform: none; }
.dr-kicker { color: var(--bm-tier-gold); font: 700 13px/1 var(--bm-font-head); letter-spacing: 0.16em; text-transform: uppercase; }
.dr-box h2 { margin: 6px 0 18px; font: 700 34px/1 var(--bm-font-head); text-transform: uppercase; }
.dr-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.dr-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 1px solid var(--bm-line); border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.6); font-size: 12px; }
.dr-day-no { color: var(--bm-muted); font: 700 11px/1 var(--bm-font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.dr-day-mark { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.dr-day-mark img { width: 22px; height: 22px; }
.dr-day-amount { font: 700 14px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; }
.dr-day-pack { color: var(--bm-tier-gold); font: 700 10px/1 var(--bm-font-head); text-transform: uppercase; }
.dr-past { opacity: 0.55; }
.dr-past .dr-day-mark { border-radius: 50%; background: #2e9e5b; color: #fff; font-size: 14px; }
.dr-next { opacity: 0.8; }
.dr-big { border-color: color-mix(in srgb, var(--bm-tier-gold) 50%, var(--bm-line)); }
.dr-today { border-color: var(--bm-tier-gold); background: color-mix(in srgb, var(--bm-tier-gold) 18%, rgba(var(--bm-surface-rgb), 0.9)); transform: scale(1.06); }
.dr.revealed .dr-today { animation: dr-glow 1.6s ease-in-out infinite; }
@keyframes dr-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bm-tier-gold) 0%, transparent); } 50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--bm-tier-gold) 70%, transparent); } }
.dr-prize { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px; }
.dr-coin { width: 52px; height: 52px; }
.dr.revealed .dr-coin { animation: dr-spin 1.4s cubic-bezier(.3, .8, .4, 1); }
@keyframes dr-spin { 0% { transform: rotateY(0) scale(0.6); } 70% { transform: rotateY(720deg) scale(1.15); } 100% { transform: rotateY(720deg) scale(1); } }
.dr-prize b { font: 800 56px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; }
.dr-prize span { color: var(--bm-muted); font-size: 16px; }
.dr-extras { display: grid; gap: 6px; margin: 0 auto 14px; padding: 0; max-width: 420px; list-style: none; text-align: left; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.dr.done .dr-extras { opacity: 1; transform: none; }
.dr-extras li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.7); font-size: 14px; }
.dr-extras img { width: 22px; height: 22px; }
.dr-extras .dr-pack { border: 1px solid var(--bm-tier-gold); }
#content .dr-next, .dr-next { margin: 0 0 16px; color: var(--bm-muted); font-size: 14px; }
.dr-actions { display: flex; justify-content: center; gap: 10px; }
.dr-actions .button { flex: 1 1 0; width: auto !important; max-width: 220px !important; padding: 12px 16px !important; font-size: 15px !important; white-space: nowrap; }
@media (max-width: 520px) {
	.dr-track { grid-template-columns: repeat(4, 1fr); }
	.dr-box h2 { font-size: 28px; }
	.dr-prize b { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .dr.revealed .dr-today, .dr.revealed .dr-coin { animation: none; } }

/* Tier chips on the boxers page and linked tier tiles on the dashboard */
.tier-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.tier-chip { --tier: var(--bm-tier-bronze); display: inline-flex; align-items: center; gap: 6px; }
.tier-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tier); }
.tier-chip.on { border-color: var(--tier); background: color-mix(in srgb, var(--tier) 20%, transparent); }
.tier-chip.tier-silver { --tier: var(--bm-tier-silver); }
.tier-chip.tier-gold { --tier: var(--bm-tier-gold); }
.tier-chip.tier-platinum { --tier: var(--bm-tier-platinum); }
.tier-chip.tier-prodigy { --tier: var(--bm-tier-prospect); }
.tier-chip.tier-champion { --tier: var(--bm-tier-champion); }
.tier-chip.tier-legend { --tier: var(--bm-tier-legend); }
.dash-tier { padding: 0; }
.dash-tier a { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 8px 4px; box-sizing: border-box; color: inherit; text-decoration: none; border-radius: 8px; }
.dash-tier a:hover { background: color-mix(in srgb, var(--tier) 18%, transparent); }

/* Market overview on the dashboard */
.dash-market { order: 5; }
.dash-market-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash-market-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dash-market-stats a { display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--bm-line); border-radius: 8px; color: var(--bm-text); text-decoration: none; }
.dash-market-stats a:hover { background: rgba(var(--bm-surface-rgb), 1); }
.dash-market-stats b { font: 700 24px/1.1 var(--bm-font-head); }
.dash-market-stats span { color: var(--bm-muted); font-size: 12px; }
.dash-market-best { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dash-market-best li { --tier: var(--bm-tier-bronze); }
.dash-market-best li.tier-silver { --tier: var(--bm-tier-silver); }
.dash-market-best li.tier-gold { --tier: var(--bm-tier-gold); }
.dash-market-best li.tier-platinum { --tier: var(--bm-tier-platinum); }
.dash-market-best li.tier-prodigy { --tier: var(--bm-tier-prospect); }
.dash-market-best li.tier-champion { --tier: var(--bm-tier-champion); }
.dash-market-best li.tier-legend { --tier: var(--bm-tier-legend); }
.dash-market-best a { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-left: 3px solid var(--tier); border-radius: 8px; background: color-mix(in srgb, var(--tier) 8%, transparent); color: var(--bm-text); text-decoration: none; font-size: 14px; }
.dash-market-best a:hover { background: color-mix(in srgb, var(--tier) 16%, transparent); }
.dmb-ovr { font: 700 20px/1 var(--bm-font-head); color: var(--tier); }
.dmb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmb-name img { width: 18px; vertical-align: -2px; }
.dmb-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmb-price img { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 600px) { .dash-market-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Card polish: a shine that sweeps across on load and on hover, and a slowly travelling
   edge light on gold and rarer cards. Both sit above the card's content and ignore the pointer. ---------- */
.card { position: relative; isolation: isolate; }
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.06) 55%, transparent 62%) no-repeat;
	background-size: 250% 100%;
	background-position: 160% 0;
	animation: card-shine 1.5s cubic-bezier(.4, 0, .2, 1) 0.25s 1 backwards;
}
:root[data-theme="light"] .card::after { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.25) 55%, transparent 62%); }
.card:hover::after { animation: card-shine-again 1s cubic-bezier(.4, 0, .2, 1) 1 backwards; }
@keyframes card-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes card-shine-again { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* Gold cards and rarer: a glint runs along the coloured stripe at the top every few seconds. The stripe
   is drawn as a background in the border area, so the glint sits exactly on it. */
.card.gold, .card.platinum, .card.prodigy, .card.champion, .card.legend {
	border-top-color: transparent;
	background:
		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent) -40% 0 / 30% 6px no-repeat border-box,
		linear-gradient(var(--tier), var(--tier)) 0 0 / 100% 6px no-repeat border-box,
		linear-gradient(160deg, var(--bm-surface-2), var(--bm-surface-solid) 62%) padding-box !important;
	animation: card-stripe 7s ease-in-out infinite;
}
.card.champion, .card.legend { animation-duration: 5s; }
@keyframes card-stripe {
	0%, 55% { background-position: -40% 0, 0 0, 0 0; }
	85%, 100% { background-position: 140% 0, 0 0, 0 0; }
}

/* Legends also carry a faint shifting sheen, like a foil card. */
.card.legend > a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(120deg, rgba(255, 120, 120, 0.07), rgba(255, 220, 120, 0.07), rgba(120, 255, 200, 0.07), rgba(120, 170, 255, 0.08), rgba(220, 140, 255, 0.07)) 0 0 / 300% 300%;
	animation: card-foil 12s ease-in-out infinite alternate;
}
@keyframes card-foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Cards lift a touch on hover where they are links. */
.card { transition: transform 0.25s cubic-bezier(.2, .9, .3, 1.2), box-shadow 0.25s ease; }
.card-list .card:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
	.card::after, .card:hover::after, .card, .card.legend > a::before { animation: none !important; }
	.card::after { background-position: 160% 0; }
	.card-list .card:hover { transform: none; }
}

/* ---------- What's new timeline (changelog-lib.php) on the updates and history pages ---------- */
.cl-page, .history-page { text-align: left; }
.cl-page { margin-bottom: 28px; }
.cl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#content .cl-head h2, #content.history-page h2 { width: auto; margin: 0 0 6px; padding: 0; border: 0; background: none; text-align: left; font-size: 26px; }
#content .cl-head p, #content .cl-empty, #content .cl-more { margin: 0; padding: 0; border: 0; background: none; color: var(--bm-muted); }
.cl-post { width: auto !important; }
.cl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cl-timeline { position: relative; margin: 0; padding: 0 0 0 28px; list-style: none; }
.cl-timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--bm-red), var(--bm-blue)); opacity: 0.6; }
.cl-month { margin: 18px 0 8px -28px; }
.cl-month:first-child { margin-top: 0; }
.cl-month span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--bm-surface-solid); border: 1px solid var(--bm-line); color: var(--bm-text); font: 700 14px/1.2 var(--bm-font-head); letter-spacing: 0.08em; text-transform: uppercase; }
.cl-entry { --cl: var(--bm-blue); position: relative; margin: 0 0 10px; }
.cl-entry.cl-new { --cl: #2e9e5b; }
.cl-entry.cl-improved { --cl: var(--bm-blue); }
.cl-entry.cl-fixed { --cl: var(--bm-red); }
.cl-entry.cl-news { --cl: var(--bm-tier-gold); }
.cl-entry.cl-history { --cl: var(--bm-tier-bronze); }
.cl-dot { position: absolute; left: -26px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--cl); box-shadow: 0 0 0 3px var(--bm-bg), 0 0 12px color-mix(in srgb, var(--cl) 60%, transparent); }
.cl-card { padding: 12px 16px; border: 1px solid var(--bm-line); border-left: 3px solid var(--cl); border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.75); }
.cl-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; color: var(--bm-muted); font-size: 13px; }
.cl-tag { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cl) 18%, transparent); color: var(--bm-text); font: 700 12px/1.3 var(--bm-font-head); letter-spacing: 0.08em; text-transform: uppercase; }
#content .cl-card h3 { width: auto; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 19px; line-height: 1.25; text-transform: none; }
.cl-card h3 a { color: var(--bm-text); }
#content .cl-card p { margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--bm-muted); }
.cl-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--cl, var(--bm-blue)); vertical-align: 1px; }
.cl-chip.cl-new { --cl: #2e9e5b; }
.cl-chip.cl-fixed { --cl: var(--bm-red); }
.cl-chip.cl-news { --cl: var(--bm-tier-gold); }
.cl-chip.cl-history { --cl: var(--bm-tier-bronze); }
#content .cl-more { margin-top: 14px; text-align: center; }

/* History page */
.hist-hero { margin: 0 0 26px; padding: 30px 26px; border-radius: var(--bm-radius); border-left: 3px solid var(--bm-red); border-right: 3px solid var(--bm-blue); background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--bm-red) 16%, transparent), transparent 60%), radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--bm-blue) 16%, transparent), transparent 60%), rgba(var(--bm-surface-rgb), 0.85); }
.hist-kicker { color: var(--bm-tier-gold); font: 700 13px/1 var(--bm-font-head); letter-spacing: 0.16em; text-transform: uppercase; }
#content .hist-hero h1 { margin: 8px 0 10px; padding: 0; border: 0; background: none; text-align: left; font-size: clamp(32px, 5vw, 52px); }
#content .hist-hero p { max-width: 40em; margin: 0 0 18px; padding: 0; border: 0; background: none; color: var(--bm-muted); font-size: 17px; }
.hist-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; padding: 0; list-style: none; }
.hist-stats li { display: flex; flex-direction: column; }
.hist-stats b { font: 800 34px/1 var(--bm-font-head); }
.hist-stats span { color: var(--bm-muted); font-size: 13px; letter-spacing: 0.04em; }
.hist-chapter { max-width: 760px; margin: 0 0 22px; }
#content .hist-chapter p { margin: 0 0 12px; padding: 0; border: 0; background: none; font-size: 16px; line-height: 1.6; }
.hist-shot { margin: 6px 0 28px; }
.hist-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--bm-line); box-shadow: var(--bm-card-shadow); }
.hist-shot figcaption { margin-top: 8px; color: var(--bm-muted); font-size: 13px; text-align: center; }
.hist-timeline { margin-top: 10px; }
#content .hist-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0; border: 0; background: none; }
.hist-cta .button { width: auto !important; }

/* About page banner to the history page */
.about-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: var(--bm-radius); border-left: 3px solid var(--bm-red); border-right: 3px solid var(--bm-blue); background: linear-gradient(100deg, color-mix(in srgb, var(--bm-red) 12%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--bm-blue) 12%, transparent)), rgba(var(--bm-surface-rgb), 0.85); color: var(--bm-text); text-decoration: none; text-align: left; }
.about-banner b { display: block; font: 700 20px/1.2 var(--bm-font-head); text-transform: uppercase; }
.about-banner span { color: var(--bm-muted); font-size: 14px; }
.about-banner .about-go { display: inline-flex; align-items: center; gap: 4px; color: var(--bm-text); font: 700 14px/1 var(--bm-font-head); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

/* About page: the text (about/content.txt) with "On this page" and the history link beside it */
#content.about-page { text-align: left; }
.about-layout { display: grid; gap: 18px; }
.about-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.about-side .about-banner { margin: 0; }
.about-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.about-toc-head { display: none; }
.about-toc a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bm-line); border-radius: 999px; background: rgba(var(--bm-surface-rgb), 0.75); color: var(--bm-text); font: 700 14px/1.2 var(--bm-font-head); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.about-toc a svg, .about-edit svg { flex: none; opacity: 0.6; }
.about-edit { display: inline-flex; align-items: center; gap: 6px; color: var(--bm-muted); font-size: 14px; }
.about-body { min-width: 0; }
#content .about-body p { margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 16px; line-height: 1.65; }
#content .about-body .about-lead { font-size: 19px; line-height: 1.55; }
#content .about-body .about-credit { margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--bm-line); color: var(--bm-muted); font-size: 15px; }
#content .about-body h2 { width: auto; margin: 30px 0 12px; padding: 0 0 0 12px; border: 0; border-left: 3px solid var(--bm-red); background: none; text-align: left; font-size: 28px; scroll-margin-top: 96px; }
#content .about-body h3 { width: auto; margin: 22px 0 6px; padding: 0; border: 0; background: none; text-align: left; font-size: 19px; }
.about-body ul { margin: 0 0 16px; padding: 0; background: none; }
.about-body ul li { padding: 4px 0 4px 22px; background-position: 0 9px; line-height: 1.55; }
.about-body .about-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 0 0 18px; }
.about-body .about-stats li { padding: 12px 14px; border: 1px solid var(--bm-line); border-top: 3px solid var(--bm-red); border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.75); color: var(--bm-muted); font-size: 14px; line-height: 1.45; }
.about-body .about-stats li:nth-child(even) { border-top-color: var(--bm-blue); }
.about-stats li strong { display: block; margin-bottom: 4px; color: var(--bm-text); font: 700 18px/1.1 var(--bm-font-head); letter-spacing: 0.04em; text-transform: uppercase; }

/* History chapters: a short list of dates and numbers beside each chapter */
.hist-chapter { display: grid; gap: 14px; }
.hist-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hist-facts li { flex: 1 1 160px; padding: 12px 14px; border: 1px solid var(--bm-line); border-left: 3px solid var(--bm-red); border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.75); }
.hist-facts li:nth-child(even) { border-left-color: var(--bm-blue); }
.hist-facts b { display: block; font: 800 24px/1.05 var(--bm-font-head); text-transform: uppercase; }
.hist-facts span { color: var(--bm-muted); font-size: 14px; }
.hist-timeline-intro p { color: var(--bm-muted); }
#content .hist-timeline-intro p { margin: 0 0 14px; padding: 0; border: 0; background: none; }

/* Wide screens: side columns on the about, updates and history pages, and timeline cards with
   the tag and date in their own column */
@media (min-width: 1000px) {
	.about-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
	.about-side { position: sticky; top: 96px; }
	.about-toc { flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 12px; border: 1px solid var(--bm-line); border-radius: var(--bm-radius); background: rgba(var(--bm-surface-rgb), 0.8); }
	.about-toc-head { display: block; margin: 2px 8px 8px; color: var(--bm-muted); font: 700 12px/1 var(--bm-font-head); letter-spacing: 0.14em; text-transform: uppercase; }
	.about-toc a { justify-content: space-between; padding: 9px 10px; border: 0; border-radius: 8px; background: none; }
	.about-toc a:hover { background: color-mix(in srgb, var(--bm-blue) 14%, transparent); }
	.about-side .about-banner { flex-direction: column; align-items: flex-start; }
	.about-body { max-width: 800px; }

	.cl-page { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
	.cl-side { position: sticky; top: 96px; }
	.cl-side .cl-head { display: block; }
	.cl-side .cl-post { margin-top: 12px; }
	.cl-side .cl-filter { flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 12px; border: 1px solid var(--bm-line); border-radius: var(--bm-radius); background: rgba(var(--bm-surface-rgb), 0.8); }
	.cl-side .cl-filter .rk-chip { display: block; margin: 0; text-align: left; }
	.cl-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 14px 18px; }
	.cl-meta { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 6px; margin: 2px 0 0; }
	.cl-card h3, .cl-card p { grid-column: 2; }

	.hist-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; align-items: center; padding: 40px 36px; }
	.hist-hero > :not(.hist-stats) { grid-column: 1; }
	#content .hist-hero p { margin-bottom: 0; }
	.hist-hero .hist-stats { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.hist-stats li { padding: 16px 14px; border: 1px solid var(--bm-line); border-radius: 12px; background: rgba(var(--bm-surface-rgb), 0.6); }
	.hist-chapter { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px; max-width: none; margin-bottom: 34px; }
	.hist-chapter .hist-text { max-width: 760px; }
	.hist-facts { flex-direction: column; flex-wrap: nowrap; }
	.hist-facts li { flex: none; }
	.hist-timeline { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 34px; }
	.hist-timeline-intro { position: sticky; top: 96px; }
}
/* Elements styled with display: flex or grid must still disappear when hidden. */
[hidden], .dr[hidden], .dash-idle-full[hidden] { display: none !important; }

/* ---------- Avatars (avatar-lib.php) and the avatar maker (avatar/index.php) ---------- */
.bm-avatar { display: block; width: 100%; height: 100%; }
.avatar-page { text-align: left; }
.av-reward { padding: 10px 14px !important; border: 1px solid var(--bm-tier-gold) !important; border-radius: 10px; background: color-mix(in srgb, var(--bm-tier-gold) 12%, transparent) !important; }
.av-maker { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 24px; align-items: start; }
.av-stage { position: sticky; top: 90px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; border: 1px solid var(--bm-line); border-radius: var(--bm-radius); background: rgba(var(--bm-surface-rgb), 0.8); }
.av-preview { width: 100%; max-width: 240px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bm-blue) 40%, var(--bm-surface-2)), var(--bm-surface-solid)); box-shadow: 0 0 0 3px var(--bm-line-hi), var(--bm-card-shadow); }
#content .av-name { margin: 0; padding: 0; border: 0; background: none; font: 700 22px/1 var(--bm-font-head); text-transform: uppercase; }
.av-save { width: 100% !important; max-width: none !important; padding: 12px 16px !important; font-size: 16px; }
.av-random { padding: 0; border: 0; background: none; color: var(--bm-muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.av-parts { display: grid; gap: 14px; }
.av-part { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 14px; border: 1px solid var(--bm-line); border-radius: 10px; background: rgba(var(--bm-surface-rgb), 0.6); }
.av-part legend { padding: 0 6px; color: var(--bm-muted); font: 700 13px/1 var(--bm-font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.av-part input { position: absolute; opacity: 0; pointer-events: none; }
.av-part label { padding: 7px 12px; border: 1px solid var(--bm-line); border-radius: 999px; color: var(--bm-text); font-size: 14px; cursor: pointer; }
.av-part label:hover { border-color: var(--bm-line-hi); }
.av-part input:checked + label { border-color: var(--bm-blue); background: color-mix(in srgb, var(--bm-blue) 18%, transparent); }
.av-part input:focus-visible + label { outline: 2px solid var(--bm-blue); outline-offset: 2px; }
.av-part label small { color: var(--bm-tier-gold); font-size: 11px; }
.av-part label.av-suggest { border-color: color-mix(in srgb, var(--bm-tier-gold) 60%, var(--bm-line)); }
.av-colours label { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15); }
.av-colours input:checked + label { box-shadow: 0 0 0 2px var(--bm-surface-solid), 0 0 0 4px var(--bm-blue); background: var(--swatch); }
.av-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) { .av-maker { grid-template-columns: 1fr; } .av-stage { position: static; } }
.dash-hello { flex-wrap: nowrap; }
.dash-avatar { flex: 0 0 auto; width: 76px; height: 76px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bm-blue) 40%, var(--bm-surface-2)), var(--bm-surface-solid)); box-shadow: 0 0 0 2px var(--bm-line-hi); transition: box-shadow 0.2s ease; }
.dash-avatar:hover { box-shadow: 0 0 0 2px var(--bm-blue); }
.dash-hello-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) { .dash-hello { flex-wrap: wrap; } .dash-avatar { width: 60px; height: 60px; } }

/* ---------- Rankings board, round two: five tiles, medals, avatars, tools on the right ---------- */
.rk-head { align-items: flex-start; flex-wrap: nowrap; gap: 20px; }
.rk-title { flex: 1 1 auto; min-width: 0; }
.rk-title .rk-you { display: inline-block; margin-top: 10px; }
.rk-tools { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; }
.rk-tools .rk-find, .rk-tools .rk-filters { width: 100%; }
.rk-find { max-width: none; margin: 0; }
.rk-find input, .rk-filters select { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; }
.rk-find button { padding: 0 16px !important; }
.rk-filters { margin: 0; }
.rk-filters select { min-width: 0; }
.rk-controls { margin-bottom: 18px; }

/* Five tiles on the 21 x 13 golden rectangle: 13, 8, 5, then two of 3 x 5 side by side. */
.rk-t1 { grid-column: 1 / span 13; grid-row: 1 / span 13; }
.rk-t2 { grid-column: 14 / span 8; grid-row: 1 / span 8; }
.rk-t3 { grid-column: 17 / span 5; grid-row: 9 / span 5; }
.rk-t4 { grid-column: 14 / span 3; grid-row: 11 / span 3; }
.rk-t5 { grid-column: 14 / span 3; grid-row: 9 / span 2; }
.rk-t6, .rk-t7 { display: none; }

.rk-tile { --tier: var(--bm-blue); --metal: none; background: var(--metal), rgba(var(--bm-surface-rgb), 0.92); border-top-width: 1px; border-color: color-mix(in srgb, var(--tier) 55%, var(--bm-line)); }
.rk-tile.medal-gold { --tier: #e6b94a; --metal: radial-gradient(120% 90% at 20% 0%, rgba(255, 236, 170, 0.5), transparent 55%), linear-gradient(140deg, rgba(230, 185, 74, 0.38), rgba(150, 105, 20, 0.2) 55%, rgba(255, 220, 130, 0.28)); }
.rk-tile.medal-silver { --tier: #c5ccd6; --metal: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.45), transparent 55%), linear-gradient(140deg, rgba(200, 208, 220, 0.34), rgba(110, 118, 130, 0.18) 55%, rgba(230, 236, 244, 0.26)); }
.rk-tile.medal-bronze { --tier: #c98a52; --metal: radial-gradient(120% 90% at 20% 0%, rgba(255, 210, 170, 0.4), transparent 55%), linear-gradient(140deg, rgba(201, 138, 82, 0.36), rgba(120, 70, 30, 0.2) 55%, rgba(230, 170, 110, 0.26)); }
.rk-tile.medal-red { --tier: var(--bm-red); --metal: radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--bm-red) 26%, transparent), transparent 70%); }
.rk-tile.medal-blue { --tier: var(--bm-blue); --metal: radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--bm-blue) 26%, transparent), transparent 70%); }
/* A slow shine across the three medal tiles. */
.rk-tile.medal-gold::after, .rk-tile.medal-silver::after, .rk-tile.medal-bronze::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%) 160% 0 / 250% 100% no-repeat; animation: rk-shine 8s ease-in-out infinite; }
.rk-tile.medal-silver::after { animation-delay: 1.2s; }
.rk-tile.medal-bronze::after { animation-delay: 2.4s; }
@keyframes rk-shine { 0%, 60% { background-position: 160% 0; } 90%, 100% { background-position: -60% 0; } }
.rk-pos { color: var(--tier); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }

/* The avatar: big and faded into the tile, behind the text. */
.rk-avatar { position: absolute; right: -6%; bottom: -8%; width: 74cqmin; height: 74cqmin; margin: 0; border: 0; border-radius: 50%; background: none; opacity: 0.9; -webkit-mask: radial-gradient(circle at 50% 45%, #000 52%, transparent 72%); mask: radial-gradient(circle at 50% 45%, #000 52%, transparent 72%); z-index: 0; }
.rk-name, .rk-score, .rk-meta, .rk-flag { position: relative; z-index: 1; }
.rk-pos { z-index: 1; }
.rk-tile .rk-name { text-shadow: 0 1px 8px rgba(var(--bm-surface-rgb), 0.9); }

/* Flags: square-cornered with a hairline edge and no shadow. */
.rk-flag { display: inline-flex; line-height: 0; }
.rk-flag img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.rk-tile .rk-flag { width: 11cqmin; min-width: 20px; margin-bottom: auto; }
.rk-list .rk-flag { width: 24px; }
.rk-list img { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); border-radius: 2px; }

@container (max-width: 150px) { .rk-avatar { width: 90cqmin; height: 90cqmin; opacity: 0.55; } .rk-tile .rk-flag { display: none; } }

@media (max-width: 760px) {
	.rk-head { flex-wrap: wrap; }
	.rk-tools { flex: 1 1 100%; }
	.rk-t1 { grid-column: 1 / span 13; grid-row: 1 / span 13; }
	.rk-t2 { grid-column: 1 / span 8; grid-row: 14 / span 8; }
	.rk-t3 { grid-column: 9 / span 5; grid-row: 17 / span 5; }
	.rk-t4 { grid-column: 11 / span 3; grid-row: 14 / span 3; }
	.rk-t5 { grid-column: 9 / span 2; grid-row: 14 / span 3; }
}
@media (prefers-reduced-motion: reduce) { .rk-tile::after { animation: none !important; } }

/* Limited events as strips on wide screens: name and terms left, country middle, time and cost right. */
.limited-left, .limited-mid, .limited-right { display: flex; flex-direction: column; gap: 6px; }
.limited-owned { color: var(--bm-text); font-size: 13px; }
.limited-owned.none { color: var(--bm-muted); }
@media (min-width: 900px) {
	.limited-list { grid-template-columns: 1fr; gap: 10px; }
	.limited-list .event a { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 14px 20px; text-align: left; }
	.limited-left { align-items: flex-start; }
	.limited-list .name { margin: 0; }
	.limited-mid { align-items: flex-start; }
	.limited-right { align-items: flex-end; text-align: right; }
	.limited-list .limited-time { margin-top: 0; }
	.limited-list .event { border-top-width: 1px; border-left: 4px solid var(--tier); }
}
.limited-list > li, .limited-list .event { width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; }
.limited-list .event a { width: auto !important; height: auto !important; }
.limited-period { align-self: center; width: auto !important; position: static !important; }
.limited-left .limited-period { align-self: center; }
@media (min-width: 900px) { .limited-left .limited-period { align-self: flex-start; } }
@media (min-width: 900px) {
	.limited-list .event a { padding: 12px 20px !important; min-height: 0 !important; }
	.limited-list .limited-left > * { margin: 0 !important; padding-top: 0 !important; position: static !important; }
	.limited-list .limited-left .content { padding: 0 !important; text-align: left; }
	.limited-left { gap: 4px; }
	.limited-left .limited-period { padding: 3px 10px !important; }
}
@media (min-width: 900px) { .limited-list .limited-left .name { padding: 0 !important; text-indent: 0; } }
.market-chips small { color: var(--bm-muted); font-family: var(--bm-font-body); text-transform: none; letter-spacing: 0; }

/* Trainers tab in the gym (gym/trainers.php) */
.trainer-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.trainer-card { --t: var(--bm-blue); display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--bm-line); border-top: 3px solid var(--t); border-radius: 10px; background: radial-gradient(90% 70% at 20% 0%, color-mix(in srgb, var(--t) 18%, transparent), transparent 70%), rgba(var(--bm-surface-rgb), 0.8); }
.trainer-power { --t: var(--bm-red); } .trainer-speed { --t: var(--bm-tier-gold); } .trainer-technique { --t: var(--bm-blue); }
.trainer-endurance { --t: #2e9e5b; } .trainer-agility { --t: var(--bm-tier-prospect); } .trainer-defence { --t: var(--bm-tier-silver); }
.trainer-stat { color: var(--t); font: 700 12px/1 var(--bm-font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.trainer-card strong { font: 700 18px/1.15 var(--bm-font-head); text-transform: uppercase; }
.trainer-about { color: var(--bm-muted); font-size: 13px; }
.gym-camp-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gym-camp-form select { min-width: 220px; }
.gym-slot.gym-camp { --gym: var(--bm-tier-gold); }

/* PvP start screen (pvp/index.php): one tile per tier, in the tier colour. */
.pvp-intro h2 { margin: 0 0 6px; }
.pvp-intro p { margin: 0 0 16px; color: var(--bm-muted); max-width: 70ch; }
.pvp-blocked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--bm-orange); border-left-width: 6px; border-radius: 12px; background: color-mix(in srgb, var(--bm-orange) 12%, var(--bm-surface-solid)); }
.pvp-blocked p { margin: 0; flex: 1 1 260px; }
.pvp-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pvp-tier { --tier: var(--bm-silver); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border: 1px solid var(--bm-line); border-top: 6px solid var(--tier); border-radius: 16px; box-shadow: var(--bm-card-shadow); background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 70%), linear-gradient(160deg, var(--bm-surface-2), var(--bm-surface-solid) 62%); }
.pvp-tier.bronze { --tier: var(--bm-tier-bronze); }
.pvp-tier.silver { --tier: var(--bm-tier-silver); }
.pvp-tier.gold { --tier: var(--bm-tier-gold); }
.pvp-tier.legend { --tier: var(--bm-tier-legend); }
.pvp-tier.prodigy { --tier: var(--bm-tier-prospect); }
.pvp-tier.champion { --tier: var(--bm-tier-champion); }
.pvp-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pvp-tier-head h3 { margin: 0; font-size: 22px; color: color-mix(in srgb, var(--tier) 60%, var(--bm-text)); }
.pvp-waiting { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--bm-green); animation: pvp-pulse 1.6s ease-in-out infinite; }
@keyframes pvp-pulse { 50% { opacity: 0.6; } }
.pvp-tier-facts { margin: 0; display: grid; gap: 6px; }
.pvp-tier-facts div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 14px; }
.pvp-tier-facts dt { color: var(--bm-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
.pvp-tier-facts dd { margin: 0; }
.pvp-tier-facts img { width: 14px; height: 14px; vertical-align: -2px; }
.pvp-tier .pvp-go { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pvp-tier-reason { margin-top: auto; padding: 8px 10px; border-radius: 10px; font-size: 13px; text-align: center; color: var(--bm-muted); background: rgba(var(--bm-surface-rgb), 0.6); border: 1px dashed var(--bm-line); }
.pvp-tier.locked { filter: saturate(0.55); }
.pvp-tier.locked .pvp-tier-head h3 { opacity: 0.75; }

/* Waiting for an opponent: a radar sweep in the tier colour. */
.pvp-searching { align-items: center; text-align: center; max-width: 520px; margin: 10px auto 20px; padding: 26px 20px 22px; }
.pvp-searching h2 { margin: 0; }
.pvp-searching p { margin: 0; }
.pvp-search-time { color: var(--bm-muted); font-size: 14px; }
.pvp-radar { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--tier) 70%, transparent); background: repeating-radial-gradient(circle, transparent 0 15px, color-mix(in srgb, var(--tier) 25%, transparent) 15px 16px); overflow: hidden; }
.pvp-radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--tier) 55%, transparent), transparent 25%); animation: pvp-sweep 2.4s linear infinite; }
@keyframes pvp-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pvp-radar::after, .pvp-waiting { animation: none; } }

/* Site notice under the top bar (site-lib.php, edited on /admin/site.php). */
.site-notice { position: relative; display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 10px auto 0; padding: 9px 44px 9px 14px; border: 1px solid color-mix(in srgb, var(--bm-gold) 55%, var(--bm-line)); border-radius: 12px; background: color-mix(in srgb, var(--bm-gold) 12%, var(--bm-surface-solid)); color: var(--bm-text); font-size: 14px; box-sizing: border-box; }
.site-notice p { margin: 0; }
.site-notice-label { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bm-gold); color: #1a1205; font: 800 11px/18px var(--bm-font-head); text-transform: uppercase; letter-spacing: 0.08em; vertical-align: 1px; }
.site-notice-link { font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.site-notice-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--bm-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.site-notice-close:hover { color: var(--bm-text); background: rgba(var(--bm-surface-rgb), 0.8); }
@media (max-width: 1200px) { .site-notice { margin: 10px 16px 0; } }
.admin-notice-preview .site-notice { margin: 0 0 14px; }
.admin-notice-preview .site-notice-close { display: none; }

/* Report a bug and the admin list of reports. */
.report-intro { max-width: 70ch; color: var(--bm-muted); }
.report-form, .admin-site-form { display: grid; gap: 6px; max-width: 640px; margin: 0 0 24px; }
.report-form label, .admin-site-form label { margin: 8px 0 0; font-weight: 700; }
.report-form input[type=text], .report-form textarea, .admin-site-form input[type=text], .admin-site-form textarea { width: 100%; box-sizing: border-box; }
.report-form button, .admin-site-form button { justify-self: start; margin-top: 8px; }
.admin-site-form .admin-check { font-weight: 400; }
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.report-list li { padding: 12px 14px; border: 1px solid var(--bm-line); border-left: 5px solid var(--bm-red); border-radius: 12px; background: var(--bm-surface-solid); }
.report-list li.report-status-1 { border-left-color: var(--bm-orange); }
.report-list li.report-status-2 { border-left-color: var(--bm-green); }
.report-list li.report-status-3 { border-left-color: var(--bm-muted); }
.report-list p { margin: 6px 0 0; overflow-wrap: anywhere; }
.report-badge { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(var(--bm-surface-rgb), 0.9); border: 1px solid var(--bm-line); }
.report-meta { color: var(--bm-muted); font-size: 13px; }
.report-note { padding: 6px 10px; border-radius: 8px; background: rgba(var(--bm-surface-rgb), 0.7); }
.report-agent { color: var(--bm-muted); font-size: 12px; }
.admin-reports form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin-reports form input[type=text] { flex: 1 1 220px; }
.admin-report-tabs a { margin-right: 12px; }
.admin-report-tabs a.selected { font-weight: 700; text-decoration: underline; }

/* Fight window layout: fits any window, names in three columns with the player tag above each name,
   round and clock on one row, the scorecard on its own row, commentary the width of the window. */
body.arena-on { overflow: hidden; }
.ui-dialog.fight-ui { position: fixed !important; top: 8px !important; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box; }
#fight-dialog { max-width: none !important; box-sizing: border-box; }
#fight-dialog #fight-names { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
#fight-dialog #fight-names .boxer-name, #fight-dialog #fight-names .opponent-name { float: none; display: flex; flex-direction: column-reverse; min-width: 0; padding: 8px 12px; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
#fight-dialog #fight-names .boxer-name { grid-column: 1; grid-row: 1; align-items: flex-start; text-align: left; }
#fight-dialog #fight-names .opponent-name { grid-column: 3; grid-row: 1; align-items: flex-end; text-align: right; }
#fight-dialog #fight-names .username { float: none; margin: 0 0 4px; padding: 0 0 3px; border-top: 0; border-bottom: 1px solid var(--bm-line); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
#fight-dialog #fight-names .versus { grid-column: 2; grid-row: 1; width: auto; margin: 0; padding: 0; line-height: 1; font-size: 15px; text-align: center; color: var(--bm-muted); text-transform: uppercase; }
#fight-dialog #fight-rounds { margin-top: 10px; }
#fight-dialog #fight-timer { float: right; margin-top: 10px; border-left: 0; border-right: 1px solid var(--bm-line); font-variant-numeric: tabular-nums; }
#fight-dialog #fight-points { float: none; clear: both; display: flex; justify-content: center; flex-wrap: wrap; height: auto; margin: 0 auto; padding: 10px 0; }
#fight-dialog #fight-points .points-round { height: auto; }
#fight-dialog #fight-commentary, #fight-dialog #fight-result { width: auto !important; max-width: 100%; box-sizing: border-box; }
#fight-dialog #fight-commentary { min-height: 3.6em; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
#mute-button, #chat-button { width: 38px !important; height: 38px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 10px; }
@media (max-width: 520px) {
	#fight-dialog #fight-names .boxer-name, #fight-dialog #fight-names .opponent-name { font-size: 15px; padding: 6px 8px; }
	#fight-dialog #fight-points .points-round { width: 20px; }
}

/* PvP pick clock: red when it is your move, blue while you wait on the other player. */
.pvp-clock { --side: var(--bm-red); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; margin: 12px 0 16px; padding: 14px 18px 0; border: 1px solid color-mix(in srgb, var(--side) 60%, var(--bm-line)); border-left: 6px solid var(--side); border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--side) 22%, var(--bm-surface-solid)), var(--bm-surface-solid) 75%); overflow: hidden; }
.pvp-clock.theirs { --side: var(--bm-blue); }
.pvp-clock-text strong { display: block; font: 800 24px/1.1 var(--bm-font-head); text-transform: uppercase; letter-spacing: 0.02em; color: color-mix(in srgb, var(--side) 55%, var(--bm-text)); }
.pvp-clock-text span { display: block; margin-top: 3px; color: var(--bm-muted); font-size: 14px; }
.pvp-countdown { font: 800 34px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; color: var(--bm-text); }
.pvp-clock-bar { grid-column: 1 / -1; height: 6px; margin: 10px -18px 0; background: rgba(var(--bm-surface-rgb), 0.8); }
.pvp-clock-bar i { display: block; height: 100%; background: var(--side); transition: width 1s linear; }
.pvp-clock.theirs .pvp-clock-text strong::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 10px; border-radius: 50%; background: var(--side); vertical-align: 0.15em; animation: pvp-pulse 1.2s ease-in-out infinite; }
.pvp-clock.low .pvp-countdown { color: var(--side); animation: pvp-pulse 0.8s ease-in-out infinite; }
@media (max-width: 520px) { .pvp-clock-text strong { font-size: 20px; } .pvp-countdown { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .pvp-clock .pvp-countdown, .pvp-clock-text strong::after { animation: none; } }

/* Sign-up honeypot: off screen for people, still in the form for bots. */
.signup-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pvp-intro .pvp-lobby { display: flex; align-items: center; gap: 10px; color: var(--bm-text); }

/* Register page: what you get on the left, the form in a card on the right; stacked on phones. */
.register-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; padding: 40px 4% 48px !important; box-sizing: border-box; text-align: left; }
.register-kicker { display: block; margin-bottom: 10px; color: var(--bm-gold-text, var(--bm-gold)); font: 700 14px/1 var(--bm-font-head); letter-spacing: 0.18em; text-transform: uppercase; }
.register-pitch h1 { margin: 0 0 12px; font: 800 clamp(36px, 5vw, 58px)/1 var(--bm-font-head); text-transform: uppercase; text-align: left; background: none; border: 0; padding: 0; }
.register-pitch > p { color: var(--bm-muted); font-size: 18px; margin: 0 0 22px; }
.register-perks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.register-perks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.register-perks svg { flex: 0 0 auto; margin-top: 2px; padding: 4px; border-radius: 50%; color: #fff; background: var(--bm-red); }
.register-perks li:nth-child(even) svg { background: var(--bm-blue); }
.register-login { color: var(--bm-muted); }
.register-card { padding: 26px 26px 22px; border: 1px solid var(--bm-line); border-top: 4px solid var(--bm-red); border-radius: 16px; background: rgba(var(--bm-surface-rgb), 0.85); box-shadow: var(--bm-card-shadow); }
.register-card #register { padding: 0; text-align: left; }
.register-card #register-form { max-width: none; }
.register-field { margin: 0 0 14px; }
.register-field label, .register-field .register-label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.register-field small { font-weight: 400; color: var(--bm-muted); margin-left: 6px; }
.register-card #register-form input[type=text], .register-card #register-form input[type=email], .register-card #register-form input[type=password], .register-card #register-form .dropdown, .register-card #register-form .dropdown dt a { width: 100%; max-width: none; box-sizing: border-box; margin: 0; }
.register-card .dropdown dd { margin-left: 0; max-width: none; }
.register-card .register-terms { margin: 16px 0; padding: 0; border: 0; text-align: left; }
.register-card .register-terms label { display: flex; gap: 10px; align-items: center; }
.register-card #register-submit { width: 100%; margin: 4px 0 0; }
@media (max-width: 800px) { .register-page { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px 32px !important; } .register-perks li { font-size: 15px; } }
#content.register-page .register-pitch h1 { margin: 0 0 12px; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; font: 800 clamp(36px, 5vw, 58px)/1 var(--bm-font-head); }
#content.register-page .register-pitch p, #content.register-page .register-terms { margin: 0 0 22px; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; }
#content.register-page .register-terms { margin: 16px 0; font-weight: 400; }

/* Version badge by the logo (site-lib.php bm_version) and a tag on staging and local copies. */
.bm-version, .bm-env { align-self: center; padding: 2px 7px; border-radius: 999px; font: 800 10px/14px var(--bm-font-head); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.bm-version { color: #1a1205; background: var(--bm-gold); }
.bm-env { color: #fff; background: var(--bm-orange); }
.bm-version-foot { margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 11px; color: #1a1205; background: var(--bm-gold); }
@media (max-width: 420px) { .bm-version, .bm-env { padding: 1px 5px; font-size: 9px; } }
@media (max-width: 420px) { .bm-env { display: none; } }
@media (max-width: 480px) { #brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-items: center; } #brand img { grid-row: 1 / 3; } #brand .bm-wordmark { grid-column: 2; grid-row: 1; line-height: 1; } #brand .bm-version { grid-column: 2; grid-row: 2; justify-self: start; padding: 0 5px; font-size: 8px; line-height: 12px; } }
@media (max-width: 480px) { #brand { justify-content: start; } }

/* Sign-up: country select with its flag, password with a show button. */
.register-card .country-pick { display: flex; align-items: center; gap: 10px; }
.register-card .country-pick img { flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--bm-line); }
.register-card .country-pick select { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; }
.register-card .register-password { position: relative; }
.register-card .register-password input { padding-right: 64px !important; }
.register-card .pw-toggle { position: absolute; right: 6px; bottom: 5px; padding: 4px 10px; border: 1px solid var(--bm-line); border-radius: 8px; background: rgba(var(--bm-surface-rgb), 0.9); color: var(--bm-text); font-size: 12px; font-weight: 700; cursor: pointer; }
.register-card #register-form .country-pick select { margin: 0 !important; max-width: none !important; width: 100% !important; }
.register-card .register-terms label { display: block; }
.register-card .register-terms input[type=checkbox] { margin: 0 8px 0 0; vertical-align: -2px; }

/* Admin stat tiles. */
.admin-stats { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.admin-stats li { padding: 14px 16px; border: 1px solid var(--bm-line); border-radius: 14px; background: rgba(var(--bm-surface-rgb), 0.85); }
.admin-stats b { display: block; font: 800 30px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; }
.admin-stats span { color: var(--bm-muted); font-size: 13px; }
.admin-site-form input[type=number] { width: 140px; }

/* Admin dashboard (admin/index.php). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.adm { text-align: left; padding: 24px 3% 32px !important; box-sizing: border-box; }
.adm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; }
#content.adm .adm-head h1 { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; font-size: 34px; }
.adm-env { color: var(--bm-muted); font-size: 14px; }
.adm-lookup { display: flex; gap: 6px; margin-left: auto; }
.adm-lookup input { width: 200px; margin: 0 !important; }
.adm-lookup button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.adm-tiles { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.adm-tiles li { padding: 14px 16px; border: 1px solid var(--bm-line); border-radius: 14px; background: rgba(var(--bm-surface-rgb), 0.85); }
.adm-tiles li a { display: block; color: inherit; text-decoration: none; }
.adm-tiles b { display: block; font: 800 32px/1 var(--bm-font-head); font-variant-numeric: tabular-nums; color: var(--bm-text); }
.adm-tiles span { display: block; margin-top: 4px; font-size: 13px; color: var(--bm-text); }
.adm-tiles small { display: block; margin-top: 2px; font-size: 12px; color: var(--bm-muted); }
.adm-tiles .adm-live b::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; background: var(--bm-green); vertical-align: 0.35em; animation: pvp-pulse 1.6s ease-in-out infinite; }
.adm-tiles .adm-alert { border-color: var(--bm-red); box-shadow: inset 4px 0 0 var(--bm-red); }
.adm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 20px; }
.adm-chart { margin: 0; padding: 14px 16px 10px; border: 1px solid var(--bm-line); border-radius: 14px; background: rgba(var(--bm-surface-rgb), 0.85); }
.adm-chart figcaption { margin: 0 0 8px; font-size: 13px; color: var(--bm-muted); }
.adm-chart figcaption span { display: block; font: 700 16px/1.2 var(--bm-font-head); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bm-text); }
.adm-chart figcaption b { color: var(--bm-text); font-size: 15px; }
.adm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.adm-chart .adm-axis { stroke: var(--bm-line-hi); stroke-width: 1; }
.adm-chart .adm-hit { fill: transparent; }
.adm-chart .adm-bar:hover .adm-hit { fill: rgba(var(--bm-surface-rgb), 0.9); }
.adm-chart .c-blue { fill: var(--bm-blue); } .adm-chart .c-red { fill: var(--bm-red); } .adm-chart .c-gold { fill: var(--bm-gold); }
.adm-chart .c-purple { fill: var(--bm-purple); } .adm-chart .c-green { fill: var(--bm-green); }
.adm-chart .adm-tick, .adm-chart .adm-peak { fill: var(--bm-muted); font-size: 12px; font-family: var(--bm-font-body); }
.adm-chart .adm-peak { fill: var(--bm-text); font-weight: 700; }
.adm-chart details { margin-top: 6px; font-size: 12px; color: var(--bm-muted); }
.adm-chart details table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.adm-chart details td, .adm-chart details th { padding: 2px 4px; text-align: left; border-bottom: 1px solid var(--bm-line); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.adm-panel { padding: 14px 16px; border: 1px solid var(--bm-line); border-radius: 14px; background: rgba(var(--bm-surface-rgb), 0.85); }
#content.adm .adm-panel h2 { margin: 0 0 10px; padding: 0; border: 0; background: none; text-align: left; font-size: 18px; }
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bm-line); font-size: 14px; }
.adm-list li:last-child { border-bottom: 0; }
.adm-list li > span, .adm-list li > a { min-width: 0; overflow-wrap: anywhere; }
.adm-list small { flex: 0 0 auto; color: var(--bm-muted); font-size: 12px; text-align: right; }
.adm-list img { vertical-align: -1px; }
.adm-empty { color: var(--bm-muted); font-size: 14px; }
.adm-more, .adm-tools a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: 14px; }
.adm-tools ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; }
.adm-tools li { break-inside: avoid; }
.adm-tools a { margin: 0 0 8px; }
@media (max-width: 600px) { .adm-lookup { margin-left: 0; width: 100%; } .adm-lookup input { flex: 1 1 auto; width: auto; } .adm-tools ul { columns: 1; } }
.adm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 800px) { .adm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-charts { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.adm-chart .adm-tick, .adm-chart .adm-peak { font-size: 11px; }
.adm-tools ul { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
@media (max-width: 600px) { .adm-charts { grid-template-columns: 1fr; } .adm-tools ul { grid-template-columns: 1fr; } }
.admin-notes { margin: 0 0 20px; padding-left: 20px; max-width: 75ch; } .admin-notes li { margin-bottom: 6px; }
/* The Staging or Local tag is its own link beside the logo (to the same page on the live site). */
header > .bm-env { order: 1; text-decoration: none; }
header > .bm-env:hover { filter: brightness(1.12); }
.cl-count { margin-left: 4px; color: var(--bm-muted); font-weight: 400; }
@media (min-width: 1000px) {
	.cl-side .cl-filter .rk-chip { display: flex; align-items: center; }
	.cl-side .cl-count { margin-left: auto; }
}

/* Abandon an open event (events-lib.php event_abandon_form): on the event page and the PvP page */
.event-abandon { display: inline-block; margin: 6px 0 0; }
.event-abandon .button { width: auto !important; padding: 6px 14px !important; font-size: 13px; opacity: 0.85; }
.pvp-blocked .event-abandon { margin: 0; }