/* CritFeed review blocks. Uses theme tokens with hard fallbacks so the
   blocks stay presentable if the theme ever changes. */

.cfc-review-box,
.cfc-pros-cons,
.cfc-game-info {
	--cfc-panel: var(--wp--preset--color--panel, #12151b);
	--cfc-line: var(--wp--preset--color--line, #232835);
	--cfc-steel: var(--wp--preset--color--steel, #8a93a6);
	--cfc-crit: var(--wp--preset--color--crit, #ff3d51);
	--cfc-gold: var(--wp--preset--color--gold, #ffc24b);
	--cfc-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--cfc-display: var(--wp--preset--font-family--display, inherit);
	background: var(--cfc-panel);
	border: 1px solid var(--cfc-line);
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
	padding: 1.5rem;
	margin-block: 2rem;
}

.cfc-label {
	font-family: var(--cfc-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--cfc-steel);
	margin: 0 0 0.5rem;
}

/* --- Review score box ------------------------------------------------- */
.cfc-review-box {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	position: relative;
}

.cfc-review-box::before,
.cfc-review-box::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.cfc-review-box::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid var(--cfc-gold);
	border-left: 2px solid var(--cfc-gold);
}

.cfc-review-box::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid var(--cfc-gold);
	border-right: 2px solid var(--cfc-gold);
}

.cfc-score {
	font-family: var(--cfc-mono);
	color: var(--cfc-gold);
	line-height: 1;
	white-space: nowrap;
}

.cfc-score-num {
	font-size: 3.25rem;
	font-weight: 700;
}

.cfc-score-max {
	font-size: 1rem;
	color: var(--cfc-steel);
	margin-left: 0.25rem;
}

.cfc-verdict {
	font-family: var(--cfc-display);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

/* --- Pros & cons ------------------------------------------------------ */
.cfc-pros-cons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.cfc-label-pros {
	color: var(--cfc-gold);
}

.cfc-label-cons {
	color: var(--cfc-crit);
}

.cfc-pc-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cfc-pc-col li {
	padding: 0.4rem 0 0.4rem 1.1rem;
	position: relative;
	font-size: 0.9375rem;
}

.cfc-pc-col li + li {
	border-top: 1px solid var(--cfc-line);
}

.cfc-pros li::before,
.cfc-cons li::before {
	position: absolute;
	left: 0;
	font-family: var(--cfc-mono);
	font-weight: 700;
}

.cfc-pros li::before {
	content: "+";
	color: var(--cfc-gold);
}

.cfc-cons li::before {
	content: "−";
	color: var(--cfc-crit);
}

/* --- Game info -------------------------------------------------------- */
.cfc-game-info dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1.25rem;
	margin: 0;
}

.cfc-game-info dt {
	font-family: var(--cfc-mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--cfc-steel);
	align-self: center;
}

.cfc-game-info dd {
	margin: 0;
	font-size: 0.9375rem;
}

/* --- Editor empty-state hint ------------------------------------------ */
.cfc-empty {
	font-family: var(--cfc-mono, ui-monospace, monospace);
	font-size: 0.8125rem;
	color: #8a93a6;
	border: 1px dashed #8a93a6;
	padding: 1rem;
}

/* --- Games nav (header icon strip) ------------------------------------ */
.cfc-games-nav {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;
	border-top: 1px solid var(--wp--preset--color--line, #232835);
	margin-top: 0.75rem;
	padding-top: 0.6rem;
}

.cfc-games-nav::-webkit-scrollbar {
	display: none;
}

.cfc-game-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.6rem;
	border: 1px solid transparent;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: var(--wp--preset--color--steel, #8a93a6);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cfc-game-link:hover {
	color: var(--wp--preset--color--foam, #edeff4);
	border-color: var(--wp--preset--color--line, #232835);
}

.cfc-game-link.is-current {
	color: var(--wp--preset--color--foam, #edeff4);
	border-color: var(--wp--preset--color--crit, #ff3d51);
}

.cfc-game-icon img,
.cfc-game-monogram {
	width: 22px;
	height: 22px;
	display: block;
	object-fit: cover;
	clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.cfc-game-monogram {
	display: grid;
	place-items: center;
	background: #1a1e27;
	border: 1px solid var(--wp--preset--color--line, #232835);
	color: var(--wp--preset--color--crit, #ff3d51);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 700;
	font-size: 0.7rem;
	line-height: 1;
}