/* Color Sort Therapy — browser demo styles.
   Calm, minimal, no chrome — mirrors the iOS app's distraction-free feel. */

.cst-game {
	max-width: 460px;
	margin: 40px auto 0;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.cst-board {
	position: relative;
	width: 100%;
	height: min(64vh, 540px);
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
	background: var(--surface-2, #2a414c);
	box-shadow: var(--shadow, 0 10px 30px -12px rgba(0, 0, 0, 0.35));
	touch-action: none;
}

.cst-tile {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-radius: 15px;
	cursor: grab;
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
		height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-radius 0.4s ease;
	will-change: transform;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.cst-tile.is-dragging {
	cursor: grabbing;
	z-index: 5;
	transform-origin: center;
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
	filter: brightness(1.04);
}

/* When solved, the strips fuse into one seamless gradient. */
.cst-board.is-solved .cst-tile {
	border-radius: 0;
	box-shadow: none;
	cursor: default;
}

.cst-board.is-solved {
	box-shadow: var(--shadow-lg, 0 40px 80px -30px rgba(0, 0, 0, 0.5)),
		0 0 0 2px rgba(247, 201, 72, 0.6);
}

.cst-toolbar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.cst-btn {
	appearance: none;
	font: inherit;
	font-size: 0.95rem;
	color: var(--text, #f1f7ee);
	background: var(--surface, #3c5b6a);
	border: 1px solid var(--border-2, rgba(241, 247, 238, 0.22));
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.cst-btn:hover {
	background: var(--surface-2, #2a414c);
	border-color: var(--text-3, #8ea2a8);
}

.cst-hint {
	color: var(--text-3, #8ea2a8);
	font-size: 0.95rem;
	text-align: center;
	margin: 0;
	min-height: 1.4em;
}

/* FAQ disclosure list (in the SEO content below the board). */
.cst-faq {
	border-bottom: 1px solid var(--border, rgba(241, 247, 238, 0.12));
	padding: 14px 0;
}

.cst-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--text, #f1f7ee);
	list-style: none;
	position: relative;
	padding-right: 28px;
}

.cst-faq summary::-webkit-details-marker { display: none; }

.cst-faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: -1px;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--text-3, #8ea2a8);
	transition: transform 0.2s;
}

.cst-faq[open] summary::after { content: "−"; }

.cst-faq p {
	margin: 10px 0 2px;
	color: var(--text-2, #c9d4d1);
}

@media (max-width: 520px) {
	.cst-game { gap: 18px; margin-top: 24px; }
	.cst-board { height: min(58vh, 480px); }
}