/*
 * Defensive reset: if this block is ever nested inside a <ol>/<ul> (e.g. an
 * editor pasted riddles as list items instead of using the block's own
 * repeater), or a theme's generic content-list styling reaches it, neither
 * should be able to add numbering, bullets, or list-item spacing to a card.
 * This is a handful of reset rules, but removes an entire class of "why do
 * my cards have numbers on them" bugs regardless of where the numbering is
 * actually coming from.
 */
.riddle-card-list,
.riddle-card-list li,
ol .riddle-card-list,
ul .riddle-card-list,
li .riddle-card-list {
	list-style: none !important;
	list-style-position: outside !important;
}
.riddle-card {
	display: block !important;
}
.riddle-card::marker {
	content: none !important;
}

.riddle-card-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1.5rem 0;

	/* Button system defaults (overridden by the size/shape modifier classes). */
	--rc-btn-font: 0.875rem;
	--rc-btn-py: 0.38rem;
	--rc-btn-px: 0.8rem;
	--rc-btn-gap: 0.35rem;
	--rc-btn-radius: 999px;
}

/* Size */
.riddle-card-list--size-sm { --rc-btn-font: 0.8rem;   --rc-btn-py: 0.3rem;  --rc-btn-px: 0.62rem; --rc-btn-gap: 0.3rem; }
.riddle-card-list--size-md { --rc-btn-font: 0.875rem; --rc-btn-py: 0.38rem; --rc-btn-px: 0.8rem;  --rc-btn-gap: 0.35rem; }
.riddle-card-list--size-lg { --rc-btn-font: 0.98rem;  --rc-btn-py: 0.5rem;  --rc-btn-px: 1rem;    --rc-btn-gap: 0.45rem; }

/* Shape is now applied per button (see .rcw-shape--* below), not on the list. */

.riddle-card {
	box-sizing: border-box;
	background: var(--rc-bg, #ffffff);
	border: var(--rc-border-width, 1px) solid var(--rc-border, #e5e7eb);
	border-radius: var(--rc-radius, 14px);
	padding: 1.25rem 1.5rem;
}

.riddle-card *,
.riddle-card *::before,
.riddle-card *::after {
	box-sizing: border-box;
}

.riddle-card__head {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

/* Question icon: the circular chip is on the icon itself, no wrapper span. */
.riddle-card__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 50%;
	background: var(--rc-icon-bg, #dceafc);
	color: var(--rc-icon-color, #2f6fed);
	overflow: hidden;
}

.riddle-card__icon--img {
	object-fit: contain;
}

/*
 * The question can render as h2/h3/h4 or p. Heading tags drag in theme styles
 * (size, margins, borders, letter-spacing, even ::before markers), so every
 * inherited property is reset here. Without this, one tag swap restyles 150
 * cards at once.
 */
.riddle-card__question {
	margin: 0;
	padding: 0.15rem 0 0;
	border: 0;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	font-style: normal;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	text-align: inherit;
	color: var(--rc-question-color, #1f2937);
	background: none;
}

.riddle-card__question::before,
.riddle-card__question::after {
	content: none;
}

/* ------------------------------------------------------------------------
 * Action row — Reveal on the left, Like + Share on the right. Always a
 * single horizontal line, at every screen size, including mobile. The top
 * border replaces what used to be an empty divider div per card.
 *
 * This row is its own local horizontal-scroll container: if a very narrow
 * screen or long custom button text ever means everything genuinely can't
 * fit even after the mobile breakpoints below shrink it, the row scrolls
 * within itself instead of wrapping to a second line or being clipped.
 * Because that scroll container is local to this element, a theme's
 * `overflow-x:hidden` on some ancestor can't clip it — which is the exact
 * bug an earlier version of this row used wrapping to guard against; a
 * local scroll container guards against the same bug without ever giving
 * up the single-row layout.
 * ---------------------------------------------------------------------- */
.riddle-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	margin-top: 1rem;
	padding-top: 0.85rem;
	padding-bottom: 2px; /* Keeps a visible scrollbar (if any) from overlapping the buttons. */
	border-top: 1px solid var(--rc-divider, #eef0f2);
}

.riddle-card__actions::-webkit-scrollbar {
	height: 4px;
}

.riddle-card__actions::-webkit-scrollbar-thumb {
	background: var(--rc-divider, #eef0f2);
	border-radius: 2px;
}

.riddle-card__toggle {
	flex: 0 0 auto;
}

.riddle-card__social {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	margin-left: auto; /* Hug the right edge. */
	position: relative; /* Anchor for the share popover. */
}

/* Shared base for all three action buttons */
.riddle-card__toggle,
.riddle-card__like,
.riddle-card__share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rc-btn-gap);
	font-family: inherit;
	font-size: var(--rc-btn-font);
	font-weight: 600;
	line-height: 1;
	min-height: 2.25rem; /* Comfortable tap target, especially on touch. */
	padding: var(--rc-btn-py) var(--rc-btn-px);
	border-radius: var(--rc-btn-radius); /* Fallback; per-button shape classes below win. */
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
	-webkit-tap-highlight-color: transparent;
	/*
	 * touch-action:manipulation removes the ~300ms tap delay some mobile
	 * browsers add while waiting to see if a tap is the start of a
	 * double-tap-to-zoom gesture, which can make a real tap feel like it
	 * "did nothing" the first time. position+z-index give each button its
	 * own stacking context, so it can't end up underneath another element
	 * that shares this same card's local stacking order.
	 */
	touch-action: manipulation;
	position: relative;
	z-index: 1;
}

/* Reveal never shrinks or truncates its label — .riddle-card__actions scrolls instead if space ever runs out. */
.riddle-card__toggle { flex: 0 0 auto; }

/* Per-button corner shape (overrides the wrapper fallback radius). */
.riddle-card .rcw-shape--pill    { border-radius: 999px; }
.riddle-card .rcw-shape--rounded { border-radius: 10px; }
.riddle-card .rcw-shape--square  { border-radius: 4px; }

.riddle-card__toggle-icon,
.riddle-card__like-icon,
.riddle-card__share-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: block;
}

.riddle-card__toggle:focus-visible,
.riddle-card__like:focus-visible,
.riddle-card__share:focus-visible {
	outline: 2px solid var(--rc-button-color, #2f6fed);
	outline-offset: 2px;
}

.riddle-card__toggle:active,
.riddle-card__like:active,
.riddle-card__share:active {
	transform: scale(0.97);
}

/* ------------------------------------------------------------------------
 * Per-button appearance. Each button carries its own style + shape + colour,
 * so Reveal, Like, and Share can be styled completely independently. Colour
 * comes from a per-button custom property set per preset:
 *   Reveal -> --rc-reveal / --rc-reveal-hover
 *   Like   -> --rc-like   (idle)  / --rc-like-color (active/liked)
 *   Share  -> --rc-share
 * ---------------------------------------------------------------------- */

/* Reveal */
.riddle-card__toggle.rcw-btn--outline {
	border-color: var(--rc-reveal, #2f6fed);
	color: var(--rc-reveal, #2f6fed);
	background: none;
}
.riddle-card__toggle.rcw-btn--outline:hover {
	background: color-mix(in srgb, var(--rc-reveal, #2f6fed) 8%, transparent);
	color: var(--rc-reveal-hover, #1d4fbb);
	border-color: var(--rc-reveal-hover, #1d4fbb);
}
.riddle-card__toggle.rcw-btn--filled {
	background: var(--rc-reveal, #2f6fed);
	border-color: var(--rc-reveal, #2f6fed);
	color: #ffffff;
}
.riddle-card__toggle.rcw-btn--filled:hover {
	background: var(--rc-reveal-hover, #1d4fbb);
	border-color: var(--rc-reveal-hover, #1d4fbb);
}

/* Like (idle appearance; the liked state is handled further down) */
.riddle-card__like.rcw-btn--outline {
	border-color: var(--rc-like, #2f6fed);
	color: var(--rc-like, #2f6fed);
	background: none;
}
.riddle-card__like.rcw-btn--outline:hover {
	background: color-mix(in srgb, var(--rc-like, #2f6fed) 8%, transparent);
}
.riddle-card__like.rcw-btn--filled {
	background: var(--rc-like, #2f6fed);
	border-color: var(--rc-like, #2f6fed);
	color: #ffffff;
}
.riddle-card__like.rcw-btn--filled:hover {
	background: color-mix(in srgb, var(--rc-like, #2f6fed) 85%, #000);
}

/* Share */
.riddle-card__share.rcw-btn--outline {
	border-color: var(--rc-share, #2f6fed);
	color: var(--rc-share, #2f6fed);
	background: none;
}
.riddle-card__share.rcw-btn--outline:hover {
	background: color-mix(in srgb, var(--rc-share, #2f6fed) 8%, transparent);
}
.riddle-card__share.rcw-btn--filled {
	background: var(--rc-share, #2f6fed);
	border-color: var(--rc-share, #2f6fed);
	color: #ffffff;
}
.riddle-card__share.rcw-btn--filled:hover {
	background: color-mix(in srgb, var(--rc-share, #2f6fed) 85%, #000);
}

/* Like specifics */
.riddle-card__like-count {
	font-variant-numeric: tabular-nums;
	min-width: 0.6ch;
	text-align: left;
}

/*
 * Liked state. Wins over both the outline and filled idle rules above because
 * it appears later with equal specificity, so it reskins the button to the
 * active "like" colour whichever style the button is set to.
 */
.riddle-card__like.is-liked,
.riddle-card__like.rcw-btn--outline.is-liked,
.riddle-card__like.rcw-btn--filled.is-liked {
	color: var(--rc-like-color, #e0245e);
	border-color: var(--rc-like-color, #e0245e);
	background: color-mix(in srgb, var(--rc-like-color, #e0245e) 10%, transparent);
}
.riddle-card__like.is-liked .riddle-card__like-icon {
	fill: var(--rc-like-color, #e0245e);
	stroke: var(--rc-like-color, #e0245e);
}
.riddle-card__like.is-liked:hover {
	color: var(--rc-like-color, #e0245e);
	border-color: var(--rc-like-color, #e0245e);
}

@keyframes riddle-like-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}
.riddle-card__like.is-popping .riddle-card__like-icon {
	animation: riddle-like-pop 0.32s ease;
}

/* Share popover */
.riddle-card__share-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 0.4rem);
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 140px;
	padding: 0.3rem;
	background: var(--rc-bg, #ffffff);
	border: 1px solid var(--rc-border, #e5e7eb);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.riddle-card__share-option {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 0.5rem 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--rc-question-color, #1f2937);
	text-decoration: none;
	border-radius: 7px;
	cursor: pointer;
}
.riddle-card__share-option:hover {
	background: var(--rc-divider, #eef0f2);
	color: var(--rc-button-color, #2f6fed);
}

/* ------------------------------------------------------------------------
 * Answer
 *
 * Collapsed with a 0fr→1fr grid row rather than max-height. max-height needs a
 * fixed ceiling, and any answer taller than it gets silently clipped; this
 * animates to the content's natural height, whatever that turns out to be.
 * The text is always in the HTML either way — this only changes how it looks.
 * ---------------------------------------------------------------------- */
.riddle-card__answer {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	margin-top: 0;
	border-radius: calc(var(--rc-radius, 14px) - 6px);
	background: var(--rc-answer-bg, #eaf7ef);
	border: 1px solid var(--rc-answer-border, #cdebd6);
	color: var(--rc-answer-text-color, #1f2937);
	transition: grid-template-rows 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

.riddle-card__answer.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.85rem;
}

.riddle-card__answer-inner {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	overflow: hidden;
	padding: 0 1rem;
	font-size: 0.98rem;
	line-height: 1.5;
	transition: padding 0.25s ease;
}

/* Answer text fills the row and wraps normally; with the icon off there is
 * simply no icon sibling, so the flex gap never applies and the text reflows
 * flush left with no leftover space. */
.riddle-card__answer-text {
	flex: 1 1 auto;
	min-width: 0;
}

.riddle-card__answer.is-open .riddle-card__answer-inner {
	padding: 0.85rem 1rem;
}

.riddle-card__answer-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 0.2rem;
	color: var(--rc-answer-icon-color, #f5b301);
}

.riddle-card__answer-icon--img {
	object-fit: contain;
	width: 16px;
	height: 16px;
}

/* Plain fallback (card design turned off for this article) */
.riddle-widget-plain ol { margin: 1.5rem 0; padding-left: 1.25rem; }
.riddle-widget-plain li { margin-bottom: 1rem; }
.riddle-widget-plain__q { font-weight: 700; margin: 0 0 0.25rem; font-size: 1.05rem; }
.riddle-widget-plain__a { margin: 0; color: var(--rc-question-color, #1f2937); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.riddle-card__answer,
	.riddle-card__answer-inner,
	.riddle-card__toggle,
	.riddle-card__like,
	.riddle-card__share { transition: none; }
	.riddle-card__like.is-popping .riddle-card__like-icon { animation: none; }
}

/* ------------------------------------------------------------------------
 * Mobile — tighten spacing so Reveal + Like + Share fit on their one
 * required line (see .riddle-card__actions for the scroll fallback if a
 * screen or custom button text is ever too narrow/long to fit even after
 * shrinking).
 * ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	.riddle-card-list {
		--rc-btn-px: 0.6rem;
		--rc-btn-gap: 0.3rem;
	}
	.riddle-card-list--size-lg { --rc-btn-font: 0.9rem; }
	.riddle-card__actions { gap: 0.5rem 0.4rem; }
	.riddle-card__social { gap: 0.3rem; }
	/* Keep every button an easy tap target on touch screens. */
	.riddle-card__toggle,
	.riddle-card__like,
	.riddle-card__share { min-height: 2.5rem; }
}

@media (max-width: 400px) {
	.riddle-card-list {
		--rc-btn-font: 0.76rem;
		--rc-btn-px: 0.45rem;
		--rc-btn-gap: 0.25rem;
	}
	.riddle-card { padding: 1rem; }
	.riddle-card__question { font-size: 1rem; }
	.riddle-card__actions { gap: 0.4rem 0.3rem; }
	.riddle-card__share-menu { right: auto; left: 50%; transform: translateX(-50%); }
}