/**
 * Bogmire Community - front-end styles.
 *
 * Uses var(--token, fallback) throughout so that if this runs on the
 * Bogmire University theme, it automatically matches (the theme
 * already defines --menu-bg, --bogmire-gold, etc. on :root) - and if
 * it's ever used on a different theme, every property still has a
 * sensible plain fallback and nothing breaks.
 */

.bcom-form,
.bcom-directory,
.bcom-friend-list {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	max-width: 480px;
	margin: 0 auto;
}

.bcom-profile {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
}

.bcom-form--apply {
	max-width: 640px;
}

.bcom-directory,
.bcom-friend-list {
	max-width: none;
}

.bcom-form h1 {
	font-family: var(--font-display, Georgia, serif);
	margin: 0 0 0.4em;
}

.bcom-form h2 {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-size: 1.2rem;
	margin: 2em 0 1em;
	padding-top: 1em;
	border-top: 1px solid var(--bogmire-gold-dim, #ddd);
}

.bcom-form h2:first-of-type {
	margin-top: 1.5em;
}

.bcom-optional {
	font-weight: normal;
	opacity: 0.6;
	font-size: 0.85em;
}

.bcom-field {
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.bcom-field label {
	font-weight: 600;
	font-size: 0.95rem;
}

.bcom-field input[type="text"],
.bcom-field input[type="email"],
.bcom-field input[type="password"],
.bcom-field input[type="url"],
.bcom-field select,
.bcom-field textarea {
	font: inherit;
	font-size: 1rem;
	padding: 0.6em 0.8em;
	border: 1px solid var(--bogmire-gold-dim, #999);
	border-radius: 2px;
	background: var(--bogmire-paper, #fff);
	color: var(--bogmire-ink, #222);
}

.bcom-field input:focus,
.bcom-field select:focus,
.bcom-field textarea:focus {
	outline: 2px solid var(--bogmire-gold, #bea053);
	outline-offset: 1px;
}

.bcom-field--checkbox label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: normal;
}

.bcom-field-description {
	font-size: 0.85rem;
	opacity: 0.7;
}

.bcom-field--avatar {
	align-items: flex-start;
}

.bcom-avatar {
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

.bcom-button {
	display: inline-block;
	font-family: inherit;
	font-size: 1rem;
	padding: 0.65em 1.5em;
	background: var(--bogmire-green-950, #14532d);
	color: var(--menu-text, #fff);
	border: 1px solid var(--bogmire-gold, #bea053);
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.bcom-button:hover,
.bcom-button:focus-visible {
	background: var(--bogmire-gold, #bea053);
	color: var(--bogmire-green-950, #14532d);
}

.bcom-button--secondary {
	background: transparent;
	color: var(--bogmire-ink, #333);
	border-color: var(--bogmire-gold-dim, #999);
}

.bcom-button--secondary:hover,
.bcom-button--secondary:focus-visible {
	background: var(--bogmire-gold-dim, #999);
	color: #fff;
}

.bcom-notice {
	padding: 0.9em 1.2em;
	margin-bottom: 1.5rem;
	border-radius: 2px;
	background: #eef7ee;
	border: 1px solid #a9d4a9;
	color: #1e4620;
}

.bcom-notice--error {
	background: #fbeaea;
	border-color: #e2a3a3;
	color: #6b1616;
}

.bcom-notice--error ul {
	margin: 0;
	padding-left: 1.2em;
}

.bcom-notice--success {
	text-align: center;
	padding: 2rem;
}

.bcom-notice--success h2 {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	margin: 0 0 0.5em;
}

.bcom-notice--success p {
	margin: 0;
}

.bcom-status {
	font-size: 0.9rem;
	opacity: 0.7;
	font-style: italic;
}

/* =========================================================
   Profile view - cover photo + overlapping avatar, a 3-column
   stats bar (Major / Minor / Classification), then content
   sections (About, Accomplishments, Badges, Collection).

   Runs full-width (unlike the forms/directory/friends list, which
   stay narrow and centered) - see the .bcom-profile rule near the
   top of this file for why it was pulled out of that shared
   max-width group.
   ========================================================= */

.bcom-profile-cover {
	position: relative;
	min-height: 340px;
	background-color: var(--menu-bg, #0c2e14);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.bcom-profile-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,8,2,0.75) 0%, rgba(0,8,2,0.35) 55%, rgba(0,8,2,0.15) 100%);
}

.bcom-profile-cover__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 2rem;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem;
}

.bcom-profile-cover__avatar {
	flex-shrink: 0;
	transform: translateY(45px); /* only the photo overlaps the bottom edge of the cover - not the text/button beside it */
}

.bcom-profile-cover__avatar img {
	width: 220px;
	height: 220px;
	border-radius: 22px;
	object-fit: cover;
	display: block;
}

.bcom-profile-cover__identity {
	padding-bottom: 1.5rem;
}

.bcom-profile-cover__name {
	font-family: var(--font-display, Georgia, serif);
	font-weight: 400;
	color: var(--bogmire-cream, #e2d6c6);
	margin: 0 0 0.15em;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.bcom-profile-cover__username {
	color: var(--bogmire-parchment, #d4bc9a);
	opacity: 0.85;
	margin: 0 0 1em;
	font-size: 1.05rem;
}

.bcom-profile-button {
	display: inline-block;
	font-family: var(--font-body, Georgia, serif);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--bogmire-cream, #f5f0e6);
	background: var(--bogmire-maroon, #722b45);
	border: 1px solid var(--bogmire-maroon, #722b45);
	border-radius: 5px;
	padding: 0.65em 1.4em;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bcom-profile-button:hover,
.bcom-profile-button:focus-visible {
	background: var(--bogmire-maroon-dark, #591f36);
	border-color: var(--bogmire-maroon-dark, #591f36);
	color: var(--bogmire-cream, #f5f0e6);
}

.bcom-profile-button--secondary {
	background: transparent;
	color: var(--bogmire-cream, #f5f0e6);
	border-color: rgba(245,240,230,0.5);
}

.bcom-profile-button--secondary:hover,
.bcom-profile-button--secondary:focus-visible {
	background: rgba(245,240,230,0.12);
	border-color: var(--bogmire-cream, #f5f0e6);
}

.bcom-profile-cover__identity .bcom-status {
	color: var(--bogmire-parchment, #d4bc9a);
	opacity: 0.85;
}

.bcom-profile-stats {
	background: var(--bogmire-paper, #f5f0e6);
	margin-top: 45px; /* matches the avatar overlap above so the stats bar clears it */
}

.bcom-profile-stats__inner {
	display: flex;
	max-width: 1100px;
	margin: 0 auto;
	padding: 2.5rem 2rem 2rem;
}

.bcom-profile-stat {
	flex: 1;
	text-align: center;
	padding: 0 1.5rem;
	border-left: 1px solid var(--bogmire-gold-dim, #ccc0a8);
}

.bcom-profile-stat:first-child {
	border-left: none;
}

.bcom-profile-stat__label {
	display: block;
	font-size: 0.9rem;
	color: var(--bogmire-ink, #333);
	opacity: 0.6;
	margin-bottom: 0.3em;
}

.bcom-profile-stat__value {
	display: block;
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.4rem;
	color: var(--menu-bg, #0c2e14);
}

.bcom-profile-content {
	background: var(--bcom-content-bg, #e7e0d1);
}

.bcom-profile-content__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 2rem;
}

.bcom-profile-section {
	margin-bottom: 2.5rem;
}

.bcom-profile-section:last-child {
	margin-bottom: 0;
}

.bcom-profile-section h2 {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-weight: 400;
	color: var(--menu-bg, #0c2e14);
	font-size: 1.6rem;
	margin: 0 0 1em;
}

.bcom-profile-panel {
	background: var(--bogmire-paper, #f5f0e6);
	border-radius: 4px;
	padding: 1.4em 1.6em;
	color: var(--bogmire-ink, #333);
}

.bcom-profile-panel--about p {
	margin: 0 0 0.6em;
}

.bcom-profile-panel--about p:last-child {
	margin-bottom: 0;
}

.bcom-profile-panel--about a {
	color: var(--bogmire-maroon, #722b45);
}

@media (max-width: 700px) {
	.bcom-profile-cover {
		min-height: auto;
		padding-bottom: 1.5rem;
	}
	.bcom-profile-cover__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-top: 2rem;
	}
	.bcom-profile-cover__avatar {
		transform: translateY(30px);
	}
	.bcom-profile-cover__avatar img {
		width: 160px;
		height: 160px;
	}
	.bcom-profile-cover__identity {
		padding-bottom: 0;
	}
	.bcom-profile-stats {
		margin-top: 30px;
	}
	.bcom-profile-stats__inner {
		flex-direction: column;
		gap: 1.5rem;
	}
	.bcom-profile-stat {
		border-left: none;
		border-top: 1px solid var(--bogmire-gold-dim, #ccc0a8);
		padding-top: 1.5rem;
	}
	.bcom-profile-stat:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* Directory */
.bcom-directory {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1.5rem;
}

.bcom-directory__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.bcom-directory__item .bcom-avatar {
	width: 80px;
	height: 80px;
}

.bcom-directory__name {
	font-weight: 600;
}

.bcom-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
}

/* Friends list */
.bcom-friend-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bcom-friend-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6em;
	border: 1px solid var(--bogmire-gold-dim, #ddd);
	border-radius: 3px;
}

.bcom-friend-list__item a {
	display: flex;
	align-items: center;
	gap: 0.75em;
	text-decoration: none;
	color: inherit;
}

.bcom-friend-list__item .bcom-avatar {
	width: 48px;
	height: 48px;
}

.bcom-friend-list__item p {
	margin: 0;
}

/* =========================================================
   Character builder
   ========================================================= */

.bcom-character-builder {
	width: 100%;
	max-width: 1200px;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	padding-top: 60px;
}

.bcom-character-builder form {
	width: 100%;
	min-width: 0;
}

.bcom-character-builder__title {
	font-family: var(--font-display, Georgia, serif);
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--menu-bg, #0c2e14);
	margin: 0 0 2rem;
}

/* Two-column layout: sticky sidebar + scrollable part rows */
.bcom-character-builder__layout {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
	width: 100%;
	min-width: 0;
}

.bcom-character-builder__sidebar {
	flex: 0 0 320px;
	min-width: 0;
	max-width: 100%;
	position: sticky;
	top: 1.5rem;
}

.bcom-character-builder__parts {
	flex: 1 1 0%;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 900px) {
	.bcom-character-builder__layout {
		flex-direction: column;
	}
	.bcom-character-builder__sidebar {
		position: static; /* sticky preview is a desktop-only behavior */
		width: 100%;
		max-width: 100%;
	}

	.bcom-character-builder__parts {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
	}
}

.bcom-character-builder__preview {
	position: relative; /* anchors the loading overlay */
	margin-bottom: 1rem;
}

.bcom-character-builder__avatar {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	object-fit: cover;
	background: var(--menu-bg, #0c2e14);
}

.bcom-character-builder__loading {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 12px; /* matches .bcom-character-builder__avatar */
}

.bcom-character-builder__preview--loading .bcom-character-builder__loading {
	display: flex;
}

.bcom-character-builder__preview--loading .bcom-character-builder__avatar {
	filter: brightness(0.6);
}

.bcom-character-builder__spinner {
	width: 44px;
	height: 44px;
	border: 4px solid rgba(245, 240, 230, 0.3);
	border-top-color: var(--bogmire-cream, #f5f0e6);
	border-radius: 50%;
	animation: bcom-spin 0.8s linear infinite;
}

@keyframes bcom-spin {
	to {
		transform: rotate(360deg);
	}
}

.bcom-character-builder__randomize {
	display: block;
	width: 100%;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	color: var(--menu-bg, #0c2e14);
	background: transparent;
	border: 1px solid var(--menu-bg, #0c2e14);
	border-radius: 5px;
	padding: 0.8em 1.2em;
	margin-bottom: 0.6rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.bcom-character-builder__randomize:hover,
.bcom-character-builder__randomize:focus-visible {
	background: var(--menu-bg, #0c2e14);
	color: var(--bogmire-cream, #f5f0e6);
}

.bcom-character-builder__save {
	display: block;
	position: relative;
	width: 100%;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	color: var(--bogmire-cream, #f5f0e6);
	background: var(--bogmire-maroon, #722b45);
	border: 1px solid var(--bogmire-maroon, #722b45);
	border-radius: 5px;
	padding: 0.8em 1.2em;
	cursor: pointer;
	text-align: center;
	transition: background 0.2s ease;
}

.bcom-character-builder__save .dashicons {
	position: absolute;
	right: 1.2em;
	top: 50%;
	transform: translateY(-50%);
}

.bcom-character-builder__save:hover,
.bcom-character-builder__save:focus-visible {
	background: var(--bogmire-maroon-dark, #591f36);
}

.bcom-character-builder__save:disabled {
	opacity: 0.7;
	cursor: default;
}

/* Part rows */
.bcom-character-builder__row {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin-bottom: 1.4rem;
}

.bcom-character-builder__part-heading {
	margin: 0;
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
}

.bcom-character-builder__part-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.55rem 0;
	border: 0;
	border-bottom: 1px solid var(--bogmire-gold-dim, #ccc0a8);
	background: transparent;
	color: var(--menu-bg, #0c2e14);
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.bcom-character-builder__part-toggle:hover,
.bcom-character-builder__part-toggle:focus-visible {
	color: var(--bogmire-maroon, #722b45);
}

.bcom-character-builder__part-chevron {
	flex: 0 0 auto;
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	transition: transform 0.2s ease;
}

.bcom-character-builder__row.is-collapsed .bcom-character-builder__part-chevron {
	transform: rotate(180deg);
}

.bcom-character-builder__panel {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	transition: grid-template-rows 0.22s ease, opacity 0.18s ease;
}

.bcom-character-builder__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.bcom-character-builder__row.is-collapsed .bcom-character-builder__panel {
	grid-template-rows: 0fr;
	opacity: 0;
}

.bcom-character-builder__options {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 0.3rem 0.3rem;
	overflow: visible;
}

.bcom-character-builder__option {
	flex: 0 0 auto;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--bogmire-gold-dim, #ccc0a8);
	border-radius: 6px;
	background: var(--bogmire-paper, #f5f0e6);
	cursor: pointer;
	overflow: hidden;
}

.bcom-character-builder__option:has(input:checked) {
	border-color: var(--bogmire-maroon, #722b45);
	border-width: 3px;
}

.bcom-character-builder__option img {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}

.bcom-character-builder__option--none span {
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
}

/* Visually hidden but still keyboard/screen-reader accessible -
   the label itself is the visible clickable card, not the native
   radio control. */
.bcom-character-builder__option input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

/* =====================================================
   Rewards, badges, accomplishments, and collections
   ===================================================== */

.bcom-accomplishments {
	display: grid;
	gap: 1rem;
}

.bcom-accomplishment {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bogmire-gold-dim, #ccc0a8);
}

.bcom-accomplishment:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.bcom-accomplishment__icon {
	flex: 0 0 auto;
	width: 2rem;
	min-height: 2rem;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	color: var(--bogmire-maroon, #722b45);
}

.bcom-accomplishment__body {
	min-width: 0;
}

.bcom-accomplishment h3,
.bcom-badge h3,
.bcom-collection-group__title,
.bcom-collection-item h4 {
	margin: 0;
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-weight: 400;
	color: var(--menu-bg, #0c2e14);
}

.bcom-accomplishment__description > :first-child {
	margin-top: 0.35rem;
}

.bcom-accomplishment__description > :last-child {
	margin-bottom: 0;
}

.bcom-accomplishment__date {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.82rem;
	opacity: 0.65;
}

.bcom-badges {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 1.25rem;
}

.bcom-badge {
	text-align: center;
}

.bcom-badge__image,
.bcom-badge__image--empty {
	display: block;
	width: 100%;
	max-width: 130px;
	aspect-ratio: 1;
	object-fit: contain;
	margin: 0 auto 0.65rem;
}

.bcom-badge__image--empty {
	border: 1px dashed var(--bogmire-gold-dim, #ccc0a8);
	border-radius: 50%;
}

.bcom-badge h3 {
	font-size: 1rem;
}

.bcom-collections {
	display: grid;
	gap: 2rem;
}

.bcom-collection-group {
	background: var(--bogmire-paper, #f5f0e6);
	border-radius: 4px;
	padding: 1.4em 1.6em;
}

.bcom-collection-group__title {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.bcom-collection-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
	gap: 1rem;
}

.bcom-collection-item {
	text-align: center;
}

.bcom-collection-item__art {
	position: relative;
	aspect-ratio: 1;
	margin-bottom: 0.6rem;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.35);
}

.bcom-collection-item__image,
.bcom-collection-item__image--empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bcom-collection-item.is-locked .bcom-collection-item__image {
	filter: grayscale(1) brightness(0.18);
	opacity: 0.55;
}

.bcom-collection-item__lock {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
	width: 2rem;
	height: 2rem;
	color: var(--bogmire-paper, #f5f0e6);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.bcom-collection-item h4 {
	font-size: 0.95rem;
}

@media (max-width: 700px) {
	.bcom-badges,
	.bcom-collection-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   Notifications
   ========================================================= */

.bcom-notifications {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	max-width: 900px;
	margin: 0 auto;
}

.bcom-notifications__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.bcom-notifications__header h1 {
	margin: 0;
}

.bcom-notifications__header form {
	margin: 0;
}

.bcom-notification-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.bcom-notification {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--bogmire-gold-dim, #d6c69a);
	background: var(--bogmire-paper, #fff);
	border-radius: 3px;
}

.bcom-notification--unread {
	border-left: 4px solid var(--bogmire-gold, #bea053);
}

.bcom-notification__avatar {
	flex: 0 0 auto;
}

.bcom-notification__avatar .bcom-avatar {
	width: 56px;
	height: 56px;
}

.bcom-notification__body {
	flex: 1 1 auto;
	min-width: 0;
}

.bcom-notification__message,
.bcom-notification__time {
	margin: 0;
}

.bcom-notification__message a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.bcom-notification__message a:hover,
.bcom-notification__message a:focus-visible {
	text-decoration: underline;
}

.bcom-notification__time {
	margin-top: 0.2rem;
	font-size: 0.85rem;
	opacity: 0.65;
}

.bcom-notification__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.bcom-notification__actions .bcom-button {
	font-size: 0.9rem;
	padding: 0.45em 0.9em;
}

.bcom-notification__unread {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bogmire-gold, #bea053);
}

.bcom-nav-notification-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.45em;
	height: 1.45em;
	padding: 0 0.35em;
	margin-left: 0.3em;
	border-radius: 999px;
	background: var(--bogmire-gold, #bea053);
	color: var(--menu-bg, #0c2e14);
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 600px) {
	.bcom-notifications__header {
		align-items: flex-start;
		flex-direction: column;
	}
}


/* =========================================================
   Two-step enrollment application
   ========================================================= */
.bcom-form--apply {
	max-width: 720px;
	padding-top: 100px;
	padding-bottom: 100px;
}

.bcom-form--apply > h1,
.bcom-application-intro {
	text-align: center;
}

.bcom-application-intro {
	margin: 0 0 1.5rem;
}

.bcom-application-progress {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	position: relative;
}

.bcom-application-progress::before {
	content: '';
	position: absolute;
	top: 18px;
	left: 25%;
	right: 25%;
	height: 2px;
	background: var(--bogmire-gold-dim, #c7b57a);
	opacity: 0.55;
}

.bcom-application-progress li {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--bogmire-ink, #222);
}

.bcom-application-progress li span {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bogmire-paper, #fff);
	border: 2px solid var(--bogmire-gold-dim, #c7b57a);
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.bcom-application-progress li.is-active,
.bcom-application-progress li.is-complete {
	opacity: 1;
}

.bcom-application-progress li.is-active span,
.bcom-application-progress li.is-complete span {
	background: var(--bogmire-green-950, #14532d);
	border-color: var(--bogmire-gold, #bea053);
	color: #fff;
}

.bcom-application-step {
	animation: bcom-step-in 220ms ease both;
}

.bcom-application-step[hidden] {
	display: none !important;
}

@keyframes bcom-step-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.bcom-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.bcom-username-input-wrap {
	display: flex;
	align-items: stretch;
}

.bcom-username-prefix {
	display: flex;
	align-items: center;
	padding: 0 0.8rem;
	border: 1px solid var(--bogmire-gold-dim, #999);
	border-right: 0;
	background: var(--bogmire-paper, #fff);
	background: color-mix(in srgb, var(--bogmire-paper, #fff) 88%, var(--bogmire-gold, #bea053));
	font-weight: 700;
}

.bcom-field .bcom-username-input-wrap input {
	min-width: 0;
	width: 100%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.bcom-username-status {
	min-height: 1.2em;
	font-size: 0.88rem;
	font-weight: 600;
}

.bcom-username-status.is-checking { opacity: 0.65; }
.bcom-username-status.is-available { color: #28743a; }
.bcom-username-status.is-unavailable { color: #9b2424; }

.bcom-privacy-note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	background: var(--bogmire-paper, #fff);
	background: color-mix(in srgb, var(--bogmire-paper, #fff) 92%, var(--bogmire-gold, #bea053));
	border-left: 3px solid var(--bogmire-gold, #bea053);
}

.bcom-privacy-note .dashicons {
	margin-top: 0.1rem;
	flex: 0 0 auto;
}

.bcom-privacy-note p {
	margin: 0;
}

.bcom-application-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
}

.bcom-application-actions--end {
	justify-content: flex-end;
}

.bcom-application-actions .bcom-button {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

@media (max-width: 600px) {
	.bcom-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bcom-application-actions {
		align-items: stretch;
	}

	.bcom-application-actions .bcom-button {
		justify-content: center;
	}
}

/* =========================================================
   Accepted-student enrollment completion
   ========================================================= */
.bcom-enrollment-completion {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	max-width: 900px;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 100px;
}

.bcom-character-builder.is-enrollment {
	padding-top: 100px;
	padding-bottom: 100px;
}

.bcom-enrollment-completion > h1 {
	text-align: center;
}

.bcom-enrollment-progress {
	list-style: none;
	margin: 0 auto 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	position: relative;
	max-width: 680px;
}

.bcom-enrollment-progress::before {
	content: '';
	position: absolute;
	top: 18px;
	left: 16.6667%;
	right: 16.6667%;
	height: 2px;
	background: var(--bogmire-gold-dim, #c7b57a);
	opacity: 0.55;
}

.bcom-enrollment-progress li {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--bogmire-ink, #222);
}

.bcom-enrollment-progress li span {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bogmire-paper, #fff);
	border: 2px solid var(--bogmire-gold-dim, #c7b57a);
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.bcom-enrollment-progress li.is-active span,
.bcom-enrollment-progress li.is-complete span {
	background: var(--bogmire-green-950, #14532d);
	border-color: var(--bogmire-gold, #bea053);
	color: #fff;
}

.bcom-form--enrollment-password {
	max-width: 520px;
}

.bcom-form--enrollment-password h2 {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
	text-align: center;
}

.bcom-form--enrollment-password > p:not(.bcom-field) {
	text-align: center;
}

.bcom-enrollment-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.75rem;
}

.bcom-enrollment-actions .bcom-button,
.bcom-character-builder__save {
	display: inline-flex;
	align-items: center;
}

.bcom-character-builder__save {
	justify-content: center;
}

.bcom-enrollment-actions .bcom-button {
	gap: 0.3rem;
}

.bcom-enrollment-intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 1.75rem;
}

.bcom-incantus-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.bcom-incantus-option {
	position: relative;
	display: block;
	cursor: pointer;
}

.bcom-incantus-option > input {
	position: absolute;
	top: 0.8rem;
	left: 0.8rem;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bcom-incantus-option__card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 1rem;
	align-items: center;
	min-height: 124px;
	padding: 0.9rem;
	border: 2px solid var(--bogmire-gold-dim, #c7b57a);
	background: var(--bogmire-paper, #fff);
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.bcom-incantus-option:hover .bcom-incantus-option__card {
	transform: translateY(-1px);
}

.bcom-incantus-option:has(input:checked) .bcom-incantus-option__card {
	border-color: var(--bogmire-green-950, #14532d);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bogmire-green-950, #14532d) 18%, transparent);
}

.bcom-incantus-option:focus-within .bcom-incantus-option__card {
	outline: 2px solid var(--bogmire-gold, #bea053);
	outline-offset: 2px;
}

.bcom-incantus-option__image {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
}

.bcom-incantus-option__image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bcom-incantus-option__name {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-size: 1.2rem;
	font-weight: 700;
}

.bcom-incantus-option__description {
	font-size: 0.95rem;
	line-height: 1.45;
}

.bcom-character-builder > .bcom-enrollment-progress {
	margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
	.bcom-incantus-options {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   Enrollment rewards reveal
   ========================================================= */
.bcom-enrollment-rewards {
	text-align: center;
	max-width: 820px;
}

.bcom-enrollment-rewards > h2 {
	margin: 0 auto 1rem;
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
}

.bcom-enrollment-rewards__chest {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	margin: 0 auto;
}

.bcom-enrollment-rewards__chest img {
	display: block;
	width: min(430px, 82vw);
	height: auto;
	transform-origin: center bottom;
}

.bcom-enrollment-rewards__chest.is-popping img {
	animation: bcom-enrollment-chest-pop 620ms cubic-bezier(.2,.8,.2,1) both;
}

.bcom-enrollment-rewards__chest.is-popping .bcom-enrollment-rewards__unlock {
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease;
}

.bcom-enrollment-rewards__reveal {
	padding-top: 0.75rem;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 320ms ease, transform 320ms ease;
}

.bcom-enrollment-rewards__reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.bcom-enrollment-rewards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1rem;
	align-items: stretch;
}

.bcom-enrollment-reward {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 170px;
	padding: 1rem;
	background: var(--bogmire-paper, #fff);
	border: 1px solid color-mix(in srgb, var(--bogmire-gold-dim, #c7b57a) 65%, transparent);
	opacity: 0;
	transform: translateY(14px) scale(.96);
	transition: opacity 320ms ease calc(var(--bcom-reward-index, 0) * 70ms), transform 320ms ease calc(var(--bcom-reward-index, 0) * 70ms);
}

.bcom-enrollment-rewards__reveal.is-visible .bcom-enrollment-reward {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.bcom-enrollment-reward__visual {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
}

.bcom-enrollment-reward__image {
	display: block;
	max-width: 96px;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bcom-enrollment-reward__fallback {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	font-size: 52px;
	line-height: 1;
}

.bcom-enrollment-reward__fallback.dashicons {
	width: 78px;
	height: 78px;
	font-size: 58px;
}

.bcom-enrollment-reward h3 {
	margin: 0;
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-size: 1rem;
	line-height: 1.25;
}

.bcom-enrollment-rewards__next {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.75rem;
}

.bcom-enrollment-rewards__next .bcom-button {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

@keyframes bcom-enrollment-chest-pop {
	0% { transform: scale(1) translateY(0); opacity: 1; }
	28% { transform: scale(1.07) translateY(-8px); opacity: 1; }
	48% { transform: scale(.96) translateY(2px); opacity: 1; }
	70% { transform: scale(1.13) translateY(-14px); opacity: 1; }
	100% { transform: scale(.84) translateY(-22px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bcom-enrollment-rewards__chest.is-popping img,
	.bcom-enrollment-reward,
	.bcom-enrollment-rewards__reveal {
		animation: none;
		transition: none;
	}
}

/* =====================================================
   Reward popup modal
   ===================================================== */

html.bcom-reward-popup-open,
body.bcom-reward-popup-open {
	overflow: hidden;
}

.bcom-reward-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 1;
	transition: opacity 220ms ease;
}

.bcom-reward-popup.is-closing {
	opacity: 0;
}

.bcom-reward-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 27, 14, 0.6);
	backdrop-filter: blur(3px);
}

.bcom-reward-popup__dialog {
	position: relative;
	width: min(760px, 100%);
	background: #f5e5cc;
	border: 1px solid var(--bogmire-gold, #ad9654);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	transform: translateY(0);
	animation: bcomRewardPopupIn 240ms ease;
}

@keyframes bcomRewardPopupIn {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.bcom-reward-popup__inner {
	position: relative;
	z-index: 2;
	padding: 3rem 3.25rem;
	text-align: center;
}

.bcom-reward-popup__corner {
	position: absolute;
	width: 108px;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

.bcom-reward-popup__corner--tl {
	top: 15px;
	left: 15px;
}

.bcom-reward-popup__corner--tr {
	top: 15px;
	right: 15px;
}

.bcom-reward-popup__corner--bl {
	bottom: 15px;
	left: 15px;
}

.bcom-reward-popup__corner--br {
	bottom: 15px;
	right: 15px;
}

.bcom-reward-popup h2 {
	margin: 0 0 0.9rem;
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--menu-bg, #0c2e14);
}

.bcom-reward-popup__message {
	max-width: 36rem;
	margin: 0 auto 1.5rem;
	color: rgba(12, 27, 14, 0.78);
}

.bcom-reward-popup__message p {
	margin: 0.5rem 0;
}

.bcom-reward-popup__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1rem 1.2rem;
	margin: 1.75rem 0 2rem;
}

.bcom-reward-popup__item {
	display: grid;
	gap: 0.7rem;
	justify-items: center;
	align-content: start;
}

.bcom-reward-popup__item-visual {
	width: 96px;
	height: 96px;
	display: grid;
	place-items: center;
}

.bcom-reward-popup__image {
	display: block;
	max-width: 96px;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}

.bcom-reward-popup__fallback {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	font-size: 2.2rem;
	color: var(--bogmire-maroon, #722b45);
	border-radius: 50%;
	border: 1px dashed var(--bogmire-gold-dim, #ccc0a8);
}

.bcom-reward-popup__fallback.dashicons {
	font-size: 2.6rem;
	line-height: 1;
}

.bcom-reward-popup__item-name {
	font-family: var(--font-content, 'Source Sans 3', sans-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--menu-bg, #0c2e14);
}

.bcom-reward-popup__claim {
	min-width: 220px;
}

@media (max-width: 700px) {
	.bcom-reward-popup {
		padding: 1rem;
	}

	.bcom-reward-popup__inner {
		padding: 2.4rem 1.5rem 2rem;
	}

	.bcom-reward-popup__corner {
		width: 74px;
	}

	.bcom-reward-popup__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bcom-reward-popup,
	.bcom-reward-popup__dialog {
		transition: none;
		animation: none;
	}
}