/* Header account button (Caveman Circus Members). */
.ccm-acct { position: relative; display: flex; align-items: center; gap: 12px; }
.ccm-acct__signin { font-weight: 700; font-size: 14px; color: var(--cc-ink, #1A1814); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--cc-yellow, #F5E04A); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ccm-acct__create {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 4px 12px 4px 4px;
	background: var(--cc-yellow, #F5E04A);
	color: var(--cc-ink, #1A1814);
	border: 1px solid var(--cc-ink, #1A1814);
	box-shadow: 2px 2px 0 var(--cc-ink, #1A1814);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}
.ccm-acct__create:hover { text-decoration: none; background: #fff; }
.ccm-acct__icon { width: 30px; height: 30px; flex: none; background: #fff; border: 1px solid var(--cc-ink, #1A1814); max-width: none; }
.ccm-acct__me {
	width: 40px;
	height: 40px;
	padding: 0;
	display: grid;
	place-items: center;
	background: var(--cc-yellow, #F5E04A);
	border: 1px solid var(--cc-ink, #1A1814);
	box-shadow: 2px 2px 0 var(--cc-ink, #1A1814);
	font-weight: 800;
	cursor: pointer;
	overflow: hidden;
}
.ccm-acct__me img { width: 40px; height: 40px; display: block; max-width: none; }
.ccm-acct__menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 60;
	min-width: 190px;
	padding: 6px 0;
	background: #fff;
	border: 2px solid var(--cc-ink, #1A1814);
	box-shadow: 4px 4px 0 var(--cc-ink, #1A1814);
}
.ccm-acct__who { margin: 0; padding: 8px 14px 10px; font-weight: 800; border-bottom: 1px solid var(--cc-rule, #CFC8BC); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccm-acct__menu a { display: block; padding: 10px 14px; min-height: 44px; font-weight: 600; color: var(--cc-ink, #1A1814); text-decoration: none; }
.ccm-acct__menu a:hover,
.ccm-acct__menu a:focus-visible { background: var(--cc-yellow, #F5E04A); }
@media (max-width: 700px) {
	.ccm-acct__create { padding: 4px; box-shadow: none; }
	.ccm-acct__signin { display: none; }
	.ccm-acct__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
}

/* Portraits, with the optional champion corner badge (shared by the header, boards and test sheet). */
.ccm-av { position: relative; display: inline-block; width: var(--ccm-av, 32px); height: var(--ccm-av, 32px); flex: none; vertical-align: middle; }
.ccm-av__clip { display: block; width: 100%; height: 100%; overflow: hidden; background: var(--cc-yellow, #F5E04A); border: 1px solid var(--cc-ink, #1A1814); box-sizing: border-box; }
.ccm-av__clip svg,
.ccm-av__clip img { display: block; width: 100%; height: 100%; max-width: none; }
/* The badge (40x36 art plus a 2-unit paper keyline: 44x40) hangs off the top-right corner, outside the clip. Room is reserved above it. */
.ccm-av--badge { margin-top: calc(var(--ccm-badge) * 0.91 * 0.5 + 5px); }
.ccm-av__badge { position: absolute; width: var(--ccm-badge); height: calc(var(--ccm-badge) * 0.91); top: calc(var(--ccm-badge) * -0.91 * 0.5); right: calc(var(--ccm-badge) * -0.3); pointer-events: none; }
.ccm-av__badge svg { display: block; width: 100%; height: 100%; max-width: none; }