.td-spell,
.td-spell__modal {
	--td-ink: #062d39;
	--td-blue: #007bc1;
	--td-pink: #e95178;
	--td-green: #009c3d;
	--td-yellow: #fab900;
	--td-soft: #fff6f9;
	--td-line: rgba(6, 45, 57, 0.12);
	--td-radius: 12px;
}

.td-spell {
	--td-scroll-offset: 88px;
	color: var(--td-ink);
	margin: 1.25rem auto 2rem;
	max-width: 1100px;
	padding: 0;
	font-size: 16px;
	line-height: 1.4;
}

.td-spell__intro {
	background: var(--td-soft);
	border-radius: var(--td-radius);
	padding: 0.85rem 1.1rem;
	margin-bottom: 0.85rem;
}

.td-spell__title {
	margin: 0 0 0.2rem;
	color: var(--td-pink) !important;
	font-size: 1.55rem;
	font-weight: 500;
	font-style: italic;
}

.td-spell__lead {
	margin: 0;
	max-width: 46rem;
	font-size: 0.95rem;
}

.td-spell__levels {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.45rem;
	scroll-margin-top: var(--td-scroll-offset);
}

.td-spell__hint-line {
	margin: 30px 0;
}

.td-spell__reset {
	display: inline-block;
	margin: 0 0 0.85rem;
}

.td-spell__reset[hidden] {
	display: none !important;
}

/* Stockholm/theme often overrides native [hidden] on sections — force panels. */
.td-spell [hidden],
.td-spell__level-panel:not(.is-active),
.td-spell__cat-panel:not(.is-active),
.td-spell__stage[hidden] {
	display: none !important;
}

.td-spell__level-panel.is-active {
	display: block !important;
}

.td-spell__cat-panel.is-active {
	display: block !important;
}

.td-spell__cat-panel.is-active.is-revealed {
	animation: td-spell-fade-in 0.4s ease both;
}

@keyframes td-spell-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.td-spell__cats,
.td-spell__cat-panel {
	scroll-margin-top: var(--td-scroll-offset);
}

.td-spell__cat-btn,
.td-spell__ex-btn,
.td-spell__btn {
	font: inherit;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.td-spell__level-btn.is-active,
.td-spell__level-btn:hover {
	color: #ffffff;
	background-color: #062d39;
}

.td-spell__cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.55rem;
	margin-bottom: 0.85rem;
}

.td-spell__cat-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	text-align: left;
	background: #fff;
	border: 6px solid var(--td-line);
	border-radius: var(--td-radius);
	padding: 0.5rem;
	min-height: 0;
	position: relative;
}

.td-spell__cat-btn:hover,
.td-spell__cat-btn.is-active {
	border-color: var(--td-blue);
	box-shadow: 0 6px 16px rgba(0, 123, 193, 0.12);
}

.td-spell__cat-img {
	width: 100%;
	height: 115px;
	border-radius: 8px;
	background: #f3f6f8 center/cover no-repeat;
}

.td-spell__cat-label {
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.2;
	padding-right: 0rem;
	text-align: center;
	width: 100%;
}

.td-spell__cat-head h3 {
	margin: 0;
	color: var(--td-blue) !important;
	font-size: 1.2rem;
}

.td-spell__cat-head p {
	margin: 0;
}

.td-spell__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
	gap: 0.55rem;
}

.td-spell__ex-btn {
	aspect-ratio: 1;
	border-radius: 10px;
	border: 3px solid var(--td-blue);
	color: var(--td-blue);
	font-weight: 700;
	font-size: 1.2em;
	background-color: transparent;
}

.td-spell__ex-btn:hover {
	transform: translateY(-1px);
	background: var(--td-blue);
	color: #fff;
}

.td-spell__ex-btn.is-done {
	background: var(--td-green);
	border-color: var(--td-green);
	color: #fff;
}

.td-spell__ex-btn.is-done:hover {
	background: #007a30;
	border-color: #007a30;
}

.td-spell__modal[hidden] {
	display: none !important;
}

.td-spell__modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.td-spell__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 45, 57, 0.55);
}

.td-spell__modal-card {
	position: relative;
	width: min(520px, 100%);
	background: #fff;
	border-radius: 16px;
	padding: 1.35rem 1.25rem 1.25rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	text-align: center;
}

.td-spell__modal-x {
	position: absolute;
	top: 0.45rem;
	right: 0.55rem;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--td-ink);
}

.td-spell__modal-title {
	margin: 0 0 0.55rem;
	color: var(--td-ink) !important;
	font-size: 1.3rem;
	font-weight: 600;
}

.td-spell__hint {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	opacity: 0.75;
}

.td-spell__audio {
	width: 100%;
	margin-bottom: 0.75rem;
}

.td-spell__btn {
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	font-weight: 600;
}

.td-spell__btn--primary,
.td-spell__btn--primary:hover,
.td-spell__btn--primary:focus,
.td-spell__btn--primary:active {
	background: #e95178 !important;
	background-color: #e95178 !important;
	color: #fff !important;
	border-color: #e95178 !important;
	filter: none;
}

.td-spell__btn--primary:hover,
.td-spell__btn--primary:focus {
	background: #d4456b !important;
	background-color: #d4456b !important;
	border-color: #d4456b !important;
	color: #fff !important;
}

.td-spell__timer {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0.35rem auto 0.75rem;
}

.td-spell__timer-ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.td-spell__timer-bg,
.td-spell__timer-fg {
	fill: none;
	stroke-width: 10;
}

.td-spell__timer-bg {
	stroke: #edf2f5;
}

.td-spell__timer-fg {
	stroke: var(--td-pink);
	stroke-linecap: round;
	stroke-dasharray: 327;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.2s linear;
}

.td-spell__timer-num {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2rem;
	font-weight: 700;
	color: var(--td-ink);
}

.td-spell__sentence {
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0.35rem 0 1.1rem;
	color: var(--td-ink);
}

.td-spell__sentence mark {
	background: transparent;
	color: var(--td-pink);
	font-weight: 800;
	padding: 0;
}

.td-spell__stage[data-stage="write"] .td-spell__modal-title {
	margin: 0;
}

.td-spell__stage[data-stage="write"] .td-spell__modal-title + .td-spell__modal-title {
	margin-top: 1.4rem;
	margin-bottom: 1rem;
}

.td-spell__timer[hidden],
.td-spell__btn[hidden],
[data-to-answer][hidden] {
	display: none !important;
}

.td-spell__modal [data-to-answer] {
	margin-top: 0.85rem;
}

/* Liggende iPad / tablet: nog wat strakker in de hoogte. */
@media (orientation: landscape) and (max-height: 900px) {
	.td-spell {
		--td-scroll-offset: 64px;
		margin: 0.75rem auto 1.25rem;
		font-size: 15px;
	}

	.td-spell__intro {
		padding: 0.65rem 0.9rem;
		margin-bottom: 0.6rem;
	}

	.td-spell__title {
		font-size: 1.35rem;
	}

	.td-spell__lead {
		display: none;
	}

	.td-spell__cats {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 0.4rem;
		margin-bottom: 0.6rem;
	}

	.td-spell__cat-img {
		height: 115px;
	}

	.td-spell__cat-label {
		font-size: 0.8rem;
	}

	.td-spell__grid {
		grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
		gap: 0.3rem;
	}

	.td-spell__ex-btn {
		font-size: 0.85rem;
		border-radius: 8px;
	}

	.td-spell__modal-card {
		padding: 1rem 1rem 0.9rem;
		max-height: min(92vh, 560px);
		overflow: auto;
	}

	.td-spell__timer-num {
		font-size: 1.7rem;
	}
}

@media (max-width: 640px) {
	.td-spell__title {
		font-size: 1.35rem;
	}
	.td-spell__cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.td-spell__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}