/*
 * Braincell Game blocks. Colours come from the active theme's palette where it defines them
 * (--wp--preset--color--*); the fallbacks keep the blocks readable on any theme.
 * Mobile first. All text/background pairs are WCAG AA.
 */
.bcb-profile, .bcb-roster, .bcb-leaderboard, .bcb-cinematic, .bcb-storylist {
	--bcb-bg: var(--wp--preset--color--stage, #0d1120);
	--bcb-panel: var(--wp--preset--color--panel, #161c33);
	--bcb-panel-2: var(--wp--preset--color--panel-raised, #1f2745);
	--bcb-line: var(--wp--preset--color--line, #34406b);
	--bcb-text: var(--wp--preset--color--text, #f3f6ff);
	--bcb-muted: var(--wp--preset--color--muted, #b7c0e0);
	--bcb-feed: var(--wp--preset--color--feed, #3df2ff);
	--bcb-spot: var(--wp--preset--color--spotlight, #ffd93d);
	--bcb-smooth: var(--wp--preset--color--smooth-brains, #8bd36a);
	--bcb-smart: var(--wp--preset--color--smart-arses, #7ec8e3);
	color: var(--bcb-text);
}
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

/* ---- Badges, notes, buttons ---- */
.bcb-badge {
	display: inline-block; padding: .15em .65em; border-radius: 999px; font-size: .78rem; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase; border: 2px solid currentColor; line-height: 1.4;
}
.bcb-badge--smooth { color: var(--bcb-smooth, #8bd36a); }
.bcb-badge--smart { color: var(--bcb-smart, #7ec8e3); }
.bcb-badge--show { color: var(--bcb-spot, #ffd93d); }
.bcb-note { color: var(--bcb-muted, #b7c0e0); font-size: .95rem; margin-block: .25rem 1rem; }
.bcb-notice {
	border: 2px dashed var(--bcb-spot, #ffd93d); border-radius: 12px; padding: .75rem 1rem;
	background: var(--bcb-panel, #161c33); color: var(--bcb-text, #f3f6ff);
}
.bcb-button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.4rem;
	border-radius: 999px; background: var(--wp--preset--color--spotlight, #ffd93d); color: #0d1120; font-weight: 900;
	text-decoration: none; text-transform: uppercase; letter-spacing: .03em; border: 3px solid #0d1120;
	box-shadow: 0 4px 0 #0d1120, 0 0 0 2px var(--wp--preset--color--spotlight, #ffd93d);
}
/* a.bcb-button beats the theme's link hover colour, which turned the label yellow on yellow. */
a.bcb-button:hover, a.bcb-button:focus-visible {
	color: #0d1120; filter: brightness(1.08);
	box-shadow: 0 4px 0 #0d1120, 0 0 0 2px var(--wp--preset--color--spotlight, #ffd93d), 0 0 22px 4px rgba(255, 217, 61, .65);
}
.bcb-button:focus-visible, .bcb-link:focus-visible, .bcb-card__link:focus-visible, .bcb-cinematic__play:focus-visible,
.bcb-tablewrap:focus-visible, .bcb-scaling summary:focus-visible, .bcb-cinematic__transcript summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--feed, #3df2ff); outline-offset: 3px;
}

/* ---- Fighter cards and mirror pairs ---- */
.bcb-pair { display: grid; gap: .75rem; grid-template-columns: 1fr; align-items: stretch; }
.bcb-pair__vs {
	justify-self: center; align-self: center; font-weight: 900; font-size: 1.1rem; letter-spacing: .12em;
	padding: .35rem .8rem; border-radius: 999px; background: var(--bcb-spot, #ffd93d); color: #0d1120;
}
.bcb-card {
	display: flex; gap: 1rem; align-items: center; padding: .85rem; border-radius: 16px;
	background: var(--bcb-panel, #161c33); border: 2px solid var(--bcb-line, #34406b); border-left-width: 8px;
}
.bcb-card.bcb-side--smooth { border-left-color: var(--bcb-smooth, #8bd36a); }
.bcb-card.bcb-side--smart { border-left-color: var(--bcb-smart, #7ec8e3); }
.bcb-card.is-current { background: var(--bcb-panel-2, #1f2745); border-color: var(--bcb-feed, #3df2ff); }
.bcb-card__icon { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; flex: none; background: #fff; }
.bcb-card__body { min-width: 0; }
.bcb-card__name { margin: .35rem 0 .25rem; font-size: 1.15rem; line-height: 1.2; }
.bcb-card__link { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; display: inline-block; padding-block: 2px; }
.bcb-card__meta { margin: 0; font-size: .9rem; color: var(--bcb-muted, #b7c0e0); }
.bcb-card__label { color: var(--bcb-text, #f3f6ff); font-weight: 700; margin-right: .35em; }
.bcb-card--soon { border-style: dashed; }
.bcb-card__soon {
	flex: none; width: 72px; height: 92px; display: grid; place-items: center; font-size: 2rem; font-weight: 900;
	border-radius: 10px; background: var(--bcb-bg, #0d1120); color: var(--bcb-muted, #b7c0e0);
}
.bcb-roster { display: grid; gap: 1.75rem; }
.bcb-roster__role { margin: 0 0 .5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--bcb-muted, #b7c0e0); }

/* ---- Fighter profile ---- */
.bcb-profile { display: grid; gap: 1.75rem; }
.bcb-profile__hero { display: grid; gap: 1.25rem; grid-template-columns: 1fr; justify-items: start; }
.bcb-profile__icon {
	width: min(240px, 60vw); height: auto; border-radius: 18px; background: #fff; border: 4px solid var(--bcb-line, #34406b);
	box-shadow: 0 0 0 3px var(--bcb-feed, #3df2ff), 0 14px 30px rgba(0, 0, 0, .45);
}
.bcb-profile.bcb-side--smooth .bcb-profile__icon { border-color: var(--bcb-smooth, #8bd36a); }
.bcb-profile.bcb-side--smart .bcb-profile__icon { border-color: var(--bcb-smart, #7ec8e3); }
.bcb-eyebrow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .5rem; }
.bcb-eyebrow__role { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.bcb-profile__roleline { font-size: 1.2rem; margin: 0 0 .75rem; }
.bcb-profile__weapon { margin: 0; color: var(--bcb-muted, #b7c0e0); }
.bcb-section h2 { margin: 0 0 .35rem; font-size: 1.45rem; }
.bcb-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 0; }
.bcb-stats > div { background: var(--bcb-panel, #161c33); border: 2px solid var(--bcb-line, #34406b); border-radius: 14px; padding: .6rem .8rem; }
.bcb-stats dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bcb-muted, #b7c0e0); font-weight: 700; }
.bcb-stats dd { margin: .1rem 0 0; font-size: 1.6rem; font-weight: 900; color: var(--bcb-spot, #ffd93d); }
.bcb-twocol { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.bcb-panel { background: var(--bcb-panel, #161c33); border: 2px solid var(--bcb-line, #34406b); border-radius: 16px; padding: 1rem 1.1rem; }
.bcb-panel h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bcb-muted, #b7c0e0); }
.bcb-panel__title { font-size: 1.35rem; font-weight: 900; margin: .1rem 0 .4rem; }
.bcb-panel p { margin-block: 0 .5rem; }
.bcb-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bcb-tier { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: 14px; background: var(--bcb-panel, #161c33); border: 2px solid var(--bcb-line, #34406b); }
.bcb-tier__level { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--bcb-feed, #3df2ff); }
.bcb-tier__name { font-weight: 900; font-size: 1.1rem; }
.bcb-tier__blurb { color: var(--bcb-muted, #b7c0e0); }

/* ---- Weapon looks: stills from the game; looks.js adds the stage and makes the cards pickable ---- */
.bcb-tier__still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: .45rem; background: #05070f; }
.bcb-looks__stage { margin: 0 auto .8rem; position: relative; max-width: 760px; } /* clips are 640 wide: keep them sharp */
.bcb-looks__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #05070f; border: 3px solid var(--bcb-line, #34406b); box-shadow: 4px 4px 0 #05070f; }
.bcb-looks__play {
	position: absolute; left: .7rem; top: .7rem; min-height: 48px; min-width: 96px; padding: .5rem 1.1rem;
	border-radius: 999px; border: 3px solid #05070f; background: var(--bcb-spot, #ffd93d); color: #05070f; font: inherit; font-weight: 900; cursor: pointer;
}
.bcb-looks__caption { margin-top: .6rem; }
.bcb-looks__caption strong { display: block; font-size: 1.25rem; font-weight: 900; }
.bcb-looks__caption span { color: var(--bcb-muted, #b7c0e0); }
.bcb-looks.is-ready .bcb-tiers { grid-template-columns: repeat(2, 1fr); }
.bcb-looks.is-ready .bcb-tier { padding: 0; }
.bcb-looks.is-ready .bcb-tier__blurb { display: none; }
.bcb-tier__pick {
	display: grid; gap: .1rem; width: 100%; height: 100%; padding: .5rem .55rem .65rem; text-align: left; font: inherit; color: inherit;
	background: none; border: 0; border-radius: 11px; cursor: pointer; min-height: 48px;
}
.bcb-tier__pick:focus-visible { outline: 3px solid var(--bcb-feed, #3df2ff); outline-offset: 2px; }
.bcb-looks.is-ready .bcb-tier:has(.bcb-tier__pick[aria-pressed="true"]) { border-color: var(--bcb-spot, #ffd93d); box-shadow: 4px 4px 0 var(--bcb-spot, #ffd93d); }
.bcb-tier__pick[aria-pressed="true"] .bcb-tier__level { color: var(--bcb-spot, #ffd93d); }
.bcb-scaling summary, .bcb-cinematic__transcript summary {
	cursor: pointer; font-weight: 800; padding: .8rem 1rem; border-radius: 12px; background: var(--bcb-panel, #161c33);
	border: 2px solid var(--bcb-line, #34406b); min-height: 48px; display: flex; align-items: center;
}

/* ---- Tables (scaling, leaderboard) ---- */
.bcb-tablewrap { overflow-x: auto; margin-top: .75rem; border-radius: 12px; }
.bcb-table { width: 100%; border-collapse: collapse; min-width: 320px; background: var(--bcb-panel, #161c33); }
.bcb-table caption { text-align: left; font-weight: 900; font-size: 1.15rem; padding: .5rem .25rem; color: var(--bcb-text, #f3f6ff); }
.bcb-table th, .bcb-table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--bcb-line, #34406b); }
.bcb-table thead th { background: var(--bcb-panel-2, #1f2745); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.bcb-table tbody th { font-weight: 900; color: var(--bcb-spot, #ffd93d); }
.bcb-table--leaders td:last-child, .bcb-table--leaders thead th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Cinematic ---- */
.bcb-cinematic { margin: 0; display: grid; gap: .75rem; }
.bcb-cinematic__stage {
	position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000;
	border: 3px solid var(--bcb-feed, #3df2ff); box-shadow: 0 0 24px rgba(61, 242, 255, .25);
}
.bcb-cinematic__video, .bcb-cinematic__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bcb-cinematic__play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: #000; }
.bcb-cinematic__play img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.bcb-cinematic__playicon {
	position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
	background: var(--bcb-spot, #ffd93d); box-shadow: 0 0 0 4px #0d1120;
}
.bcb-cinematic__playicon::after {
	content: ""; position: absolute; left: 28px; top: 20px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #0d1120;
}
.bcb-cinematic__soon {
	position: absolute; inset: 0; display: grid; place-items: center; background-size: cover; background-position: center;
	background-color: var(--bcb-panel, #161c33);
	background-image: repeating-linear-gradient(45deg, rgba(61, 242, 255, .08) 0 14px, transparent 14px 28px);
}
.bcb-cinematic__soon-label {
	padding: .5rem 1.2rem; border-radius: 999px; background: #0d1120; color: var(--bcb-spot, #ffd93d); font-weight: 900;
	text-transform: uppercase; letter-spacing: .1em; border: 2px solid var(--bcb-spot, #ffd93d);
}
.bcb-cinematic__caption { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.bcb-cinematic__chapter { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--bcb-feed, #3df2ff); }
.bcb-cinematic__title { font-size: 1.2rem; }
.bcb-cinematic__duration { color: var(--bcb-muted, #b7c0e0); font-size: .9rem; }
.bcb-cinematic__text { padding: .75rem 1rem 0; max-width: 68ch; }
.bcb-cinematic__text p { margin-block: 0 .85rem; }

/* ---- Story list ---- */
.bcb-storylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.bcb-storylist__item { padding: 1rem 1.1rem; border-radius: 16px; background: var(--bcb-panel, #161c33); border: 2px solid var(--bcb-line, #34406b); }
.bcb-storylist__title { margin: .5rem 0 .25rem; font-size: 1.35rem; }
.bcb-storylist__title a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 2px; display: inline-block; padding-block: 2px; }
.bcb-storylist__item p { margin: 0; color: var(--bcb-muted, #b7c0e0); }

/* ---- Kid-voice pass (2026-10-07) ---- */
.bcb-card { border-width: 3px; border-left-width: 10px; box-shadow: 5px 5px 0 #05070f; transition: transform .12s ease; }
.bcb-card:hover { transform: translate(-2px, -2px); }
.bcb-card__icon { border: 3px solid var(--bcb-line, #34406b); transform: rotate(-3deg); }
.bcb-side--smooth .bcb-card__icon { border-color: var(--bcb-smooth, #8bd36a); }
.bcb-side--smart .bcb-card__icon { border-color: var(--bcb-smart, #7ec8e3); transform: rotate(3deg); }
.bcb-card__quote { margin: 0 0 .3rem; font-style: italic; font-size: .92rem; color: var(--bcb-spot, #ffd93d); }
.bcb-card--soon .bcb-card__name { margin-top: .4rem; }
.bcb-card__soon { color: var(--bcb-spot, #ffd93d); animation: bcb-wobble 2.4s ease-in-out infinite; }
@keyframes bcb-wobble { 50% { transform: rotate(-6deg) scale(1.06); } }
.bcb-pair__vs { transform: rotate(-6deg); box-shadow: 3px 3px 0 #05070f; font-size: 1.2rem; }
.bcb-roster__role { display: inline-block; color: #0d1120; background: var(--bcb-feed, #3df2ff); padding: .15rem .6rem; border-radius: 6px; transform: rotate(-1deg); }

/* Fighter profile: speech bubble, bio, loves/hates. */
.bcb-bubble {
	position: relative; display: inline-block; margin: .25rem 0 1rem; padding: .7rem 1rem; border-radius: 18px;
	background: #fff; color: #0d1120; font-weight: 900; font-size: 1.2rem; line-height: 1.3; box-shadow: 4px 4px 0 #05070f;
}
.bcb-bubble::after {
	content: ""; position: absolute; left: 1.4rem; bottom: -12px; border-style: solid; border-width: 12px 10px 0 0;
	border-color: #fff transparent transparent transparent;
}
.bcb-profile__bio { font-size: 1.15rem; margin: 0 0 .75rem; }
.bcb-profile__roleline { font-size: 1.05rem; }
.bcb-likes { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: 1rem 0 0; }
.bcb-likes > div { padding: .55rem .8rem; border-radius: 12px; background: var(--bcb-panel, #161c33); border: 2px solid var(--bcb-line, #34406b); }
.bcb-likes dt { font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.bcb-likes > div:first-child dt { color: var(--bcb-smooth, #8bd36a); }
.bcb-likes > div:last-child dt { color: #ff8fa3; }
.bcb-likes dd { margin: .1rem 0 0; }
.bcb-stats > div, .bcb-panel, .bcb-tier { border-width: 3px; box-shadow: 4px 4px 0 #05070f; }
.bcb-profile__icon { transform: rotate(-2deg); }

/* ---- Wider screens ---- */
@media (min-width: 640px) {
	.bcb-pair { grid-template-columns: 1fr auto 1fr; }
	.bcb-stats { grid-template-columns: repeat(3, 1fr); }
	.bcb-twocol { grid-template-columns: 1fr 1fr; }
	.bcb-profile__hero { grid-template-columns: auto 1fr; align-items: center; }
	.bcb-card__icon { width: 84px; height: 84px; }
	.bcb-likes { grid-template-columns: 1fr 1fr; }
	.bcb-tiers { grid-template-columns: 1fr 1fr; }
	.bcb-looks.is-ready .bcb-tiers { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.bcb-button { transition: none; }
	.bcb-card, .bcb-card__soon { transition: none; animation: none; }
}