/* AI Tutor interactive story player. Everything is scoped under .tutor-ssplush. */

.tutor-ssplush-wrap {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 8px 0 32px;
}

.tutor-ssplush {
	padding: 10px;
	box-sizing: border-box;
	--tsp-ink: #23305a;
	--tsp-ink-soft: #55628c;
	--tsp-card: #ffffff;
	--tsp-accent: #ff7a59;
	--tsp-accent-dark: #e05a38;
	--tsp-good: #2fb457;
	--tsp-good-bg: #e6f9ec;
	--tsp-kind: #b7791f;
	--tsp-kind-bg: #fff4d6;
	--tsp-info-bg: #eaf1ff;
	--tsp-warn-bg: #ffe9e2;
	--tsp-radius: 20px;
	--tsp-line: #d7defa;
	/* Player Theme (assets/js/player-theme.js sets these; the values here are the classic look). */
	--tsp-accent-ink: #fff;
	--tsp-page-bg: transparent;
	--tsp-btn-bg: #fff;
	--tsp-btn-ink: var(--tsp-ink);
	--tsp-btn-radius: 999px;
	--tsp-btn-border: 3px;
	--tsp-depth: 4px;
	--tsp-stage-radius: 24px;
	--tsp-stage-bg: #cfe8ff;
	--tsp-stage-shadow: 0 10px 30px rgba(35, 48, 90, 0.18);
	--tsp-bubble-bg: #fff;
	--tsp-bubble-ink: var(--tsp-ink);
	--tsp-bubble-radius: 14;
	--tsp-narr-bg: #182146;
	--tsp-font: inherit;
	--tsp-fw: 800;
	--tsp-scale: 1;

	color: var(--tsp-ink);
	font-family: var(--tsp-font);
	line-height: 1.4;
	background: var(--tsp-page-bg);
	border-radius: var(--tsp-radius);
}

.tutor-ssplush *,
.tutor-ssplush *::before,
.tutor-ssplush *::after {
	box-sizing: border-box;
}

.tutor-ssplush [hidden] {
	display: none !important;
}

.tsp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tutor-ssplush-loading {
	padding: 40px 0;
	text-align: center;
	color: #55628c;
}

/* ------------------------------------------------------------------ top bar */

.tsp-top {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 34px;
	margin-bottom: 8px;
}

.tsp-scene-count {
	flex: 0 0 auto;
	min-width: 96px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #eef2ff;
	font-size: 13px;
	font-weight: 800;
}

.tsp-scene-count:empty {
	visibility: hidden;
}

.tsp-progress {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsp-step { margin: 0; padding: 0; }

.tsp-dot {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 50%;
	background: #dfe5fb;
	border: 2px solid #c6d0f7;
	font: inherit;
	transition: transform 0.3s, background 0.3s;
}

.tsp-dot:not(:disabled) { cursor: pointer; }
.tsp-dot:disabled { cursor: default; opacity: 1; }

/* A "?" marks a scene with a question, without saying anything about its answer. */
.tsp-dot.has-question::after {
	content: "?";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	color: #6b76a8;
}

.tsp-dot.has-question.is-done::after { color: #fff; }
.tsp-dot.has-question.is-current::after { color: var(--tsp-accent-dark); }

.tsp-dot.is-done {
	background: var(--tsp-good);
	border-color: var(--tsp-good);
}

.tsp-dot.is-current {
	background: #fff;
	border-color: var(--tsp-accent);
	transform: scale(1.3);
}

.tsp-preview-tag {
	padding: 3px 10px;
	border-radius: 999px;
	background: #f3e8ff;
	color: #6b21a8;
	font-size: 12px;
	font-weight: 800;
}

/* -------------------------------------------------------------------- stage */

.tsp-stage-wrap {
	position: relative;
	border-radius: var(--tsp-stage-radius);
	overflow: hidden;
	box-shadow: var(--tsp-stage-shadow);
	background: var(--tsp-stage-bg);
}

.tsp-stage {
	position: relative;
	container-type: inline-size;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 260px;
	font-size: 1.5vw;
	font-size: clamp(9px, 1.55cqw, 17px);
	overflow: hidden;
	user-select: none;
}

.tsp-camera {
	position: absolute;
	inset: 0;
	transform-origin: center center;
}

.tsp-camera.tsp-cam-play { will-change: transform; }

.tsp-stage[data-camera="zoom_in"] .tsp-camera.tsp-cam-play { animation: tsp-cam-zoom-in 8s ease-in-out forwards; }
.tsp-stage[data-camera="zoom_out"] .tsp-camera.tsp-cam-play { animation: tsp-cam-zoom-out 8s ease-in-out forwards; }
.tsp-stage[data-camera="pan_left"] .tsp-camera.tsp-cam-play { animation: tsp-cam-pan-left 9s ease-in-out forwards; }
.tsp-stage[data-camera="pan_right"] .tsp-camera.tsp-cam-play { animation: tsp-cam-pan-right 9s ease-in-out forwards; }
.tsp-stage[data-camera="parallax"] .tsp-camera.tsp-cam-play .tsp-decor { animation: tsp-cam-parallax-decor 9s linear forwards; }
.tsp-stage[data-camera="parallax"] .tsp-camera.tsp-cam-play .tsp-cast { animation: tsp-cam-parallax-cast 9s linear forwards; }

.tsp-stage[data-focus="left"] .tsp-camera.tsp-cam-play { transform-origin: 25% 50%; }
.tsp-stage[data-focus="right"] .tsp-camera.tsp-cam-play { transform-origin: 75% 50%; }

@keyframes tsp-cam-zoom-in { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes tsp-cam-zoom-out { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes tsp-cam-pan-left { from { transform: scale(1.06) translateX(2%); } to { transform: scale(1.06) translateX(-2%); } }
@keyframes tsp-cam-pan-right { from { transform: scale(1.06) translateX(-2%); } to { transform: scale(1.06) translateX(2%); } }
@keyframes tsp-cam-parallax-decor { from { transform: translateX(0); } to { transform: translateX(-4%); } }
@keyframes tsp-cam-parallax-cast { from { transform: translateX(0); } to { transform: translateX(2.5%); } }

.tsp-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	--sky1: #bfe8ff;
	--sky2: #e8f8ff;
	--ground: #8fd694;
	background-image: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 64%, var(--ground) 64.1%, var(--ground) 100%);
}

.tsp-scene-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

/* The video already shows the scene, so its stage keeps the same corners/shadow as an image one. */
.tsp-has-video .tsp-bg { background-image: none !important; }

.tsp-live-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
.tsp-live-scene canvas { display: block; }

.tsp-bg.has-image {
	background-color: #dbe6ff;
}

.tsp-pal-bus { --sky1: #9bd3f5; --sky2: #d9f0ff; --ground: #6b7280; }
.tsp-pal-classroom { --sky1: #ffe7b8; --sky2: #fff6df; --ground: #c99a6b; }
.tsp-pal-home { --sky1: #ffd9d0; --sky2: #fff0ea; --ground: #d8b48d; }
.tsp-pal-park { --sky1: #a8e0ff; --sky2: #e6f7ff; --ground: #7bcf7f; }
.tsp-pal-street { --sky1: #ffd2a8; --sky2: #ffeedd; --ground: #b9c2d6; }
.tsp-pal-forest { --sky1: #b7e6c1; --sky2: #e2f6e6; --ground: #4f9d63; }
.tsp-pal-sea { --sky1: #56c7e8; --sky2: #c9f1fb; --ground: #f3dc9a; }
.tsp-pal-space { --sky1: #1f2255; --sky2: #4a3f9c; --ground: #2f3277; }
.tsp-pal-market { --sky1: #ffe0a3; --sky2: #fff3d1; --ground: #d9b382; }
.tsp-pal-farm { --sky1: #bfe6ff; --sky2: #f0fbff; --ground: #a8d27d; }
.tsp-pal-library { --sky1: #e7d5ff; --sky2: #f6ecff; --ground: #b58a5c; }
.tsp-pal-night { --sky1: #1b2454; --sky2: #39418a; --ground: #26305f; }

.tsp-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tsp-decor-item {
	position: absolute;
	font-size: 3.2em;
	opacity: 0.9;
	animation: tsp-float 9s ease-in-out infinite;
}

.tsp-decor-1 { top: 8%; left: 6%; }
.tsp-decor-2 { top: 14%; right: 8%; animation-delay: -3s; }
.tsp-decor-3 { top: 40%; left: 46%; animation-delay: -6s; font-size: 2.4em; }

@keyframes tsp-float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(1em, -0.7em); }
}

.tsp-scene-title {
	position: absolute;
	left: 1em;
	bottom: 0.8em;
	max-width: 46%;
	padding: 0.25em 0.9em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	font-size: 1.15em;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tsp-scene-title:empty {
	display: none;
}

/* Scene transitions. */
.tsp-enter-fade { animation: tsp-fade-in 0.5s ease-out; }
.tsp-enter-slide { animation: tsp-slide-in 0.5s ease-out; }
.tsp-enter-zoom { animation: tsp-zoom-in 0.5s ease-out; }
@keyframes tsp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsp-slide-in { from { transform: translateX(6%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tsp-zoom-in { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------- characters */

.tsp-cast {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tsp-char {
	--scale: 1;
	position: absolute;
	bottom: 3%;
	width: 11em;
	transform: translateX(-50%) scale(var(--scale));
	transform-origin: 50% 100%;
	text-align: center;
	transition: transform 0.3s, opacity 0.3s, filter 0.3s;
}

.tsp-char.pos-far_left { left: 12%; }
.tsp-char.pos-left { left: 30%; }
.tsp-char.pos-center { left: 50%; }
.tsp-char.pos-right { left: 70%; }
.tsp-char.pos-far_right { left: 88%; }

.tsp-layout-single .tsp-char { --scale: 1.3; }
.tsp-layout-group .tsp-char { --scale: 0.85; }

.tsp-face {
	position: relative;
	display: grid;
	place-items: center;
	width: 9em;
	height: 9em;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0.45em 0 rgba(35, 48, 90, 0.14), 0 0.9em 1.6em rgba(35, 48, 90, 0.2);
	overflow: visible;
	animation: tsp-bob 3.4s ease-in-out infinite;
}

.tsp-face-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.tsp-face-emoji {
	font-size: 5.8em;
	line-height: 1;
}

.tsp-expr {
	position: absolute;
	right: -0.5em;
	bottom: -0.2em;
	display: grid;
	place-items: center;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background: #fff;
	font-size: 1.3em;
	box-shadow: 0 0.2em 0.5em rgba(35, 48, 90, 0.25);
}

.tsp-body {
	width: 7em;
	height: 4.2em;
	margin: -1em auto 0;
	border-radius: 3em 3em 0.8em 0.8em;
	background: var(--c);
	box-shadow: inset 0 -0.6em 0 rgba(0, 0, 0, 0.1);
}

.tsp-nametag {
	position: absolute;
	left: 50%;
	bottom: -0.2em;
	transform: translateX(-50%);
	padding: 0.1em 0.9em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--tsp-ink);
	font-size: 1.05em;
	font-weight: 800;
	white-space: nowrap;
}

.tsp-action-icon {
	position: absolute;
	top: -0.6em;
	right: -0.6em;
	z-index: 2;
	font-size: 3em;
	animation: tsp-wiggle 1.2s ease-in-out infinite;
}

@keyframes tsp-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-0.55em); }
}

@keyframes tsp-wiggle {
	0%, 100% { transform: rotate(-12deg); }
	50% { transform: rotate(14deg); }
}

.tsp-char.is-speaking {
	z-index: 3;
	transform: translateX(-50%) scale(calc(var(--scale) * 1.07));
}

.tsp-char.is-speaking .tsp-face {
	box-shadow: 0 0 0 0.45em rgba(255, 210, 63, 0.75), 0 0.9em 1.6em rgba(35, 48, 90, 0.25);
}

.tsp-char.is-speaking .tsp-face-emoji {
	animation: tsp-talk 0.42s ease-in-out infinite;
}

.tsp-char.is-quiet {
	opacity: 0.82;
	transform: translateX(-50%) scale(calc(var(--scale) * 0.95));
}

@keyframes tsp-talk {
	0%, 100% { transform: scale(1) rotate(0); }
	30% { transform: scale(1.06, 0.95) rotate(-3deg); }
	70% { transform: scale(0.96, 1.05) rotate(3deg); }
}

.act-jump .tsp-face { animation: tsp-jump 0.7s ease-out 2; }
.act-nod .tsp-face-emoji { animation: tsp-nod 0.7s ease-in-out 3; }
.act-shake_head .tsp-face-emoji { animation: tsp-shake 0.6s ease-in-out 2; }
.act-turn_around .tsp-face { animation: tsp-turn 1.1s ease-in-out 1; }
.act-walk_in { animation: tsp-walk 0.9s ease-out 1; }
.expr-excited .tsp-face { animation: tsp-jump 0.8s ease-out 2; }
.expr-worried .tsp-face { animation: tsp-tremble 0.35s linear infinite; }
.expr-sad .tsp-face { animation: none; transform: translateY(0.35em); }
.expr-thinking .tsp-face-emoji { transform: rotate(-8deg); }
.expr-angry .tsp-face { box-shadow: 0 0 0 0.35em rgba(229, 72, 77, 0.45), 0 0.9em 1.6em rgba(35, 48, 90, 0.2); }

@keyframes tsp-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-1.6em) rotate(-4deg); } 70% { transform: translateY(0) rotate(3deg); } }
@keyframes tsp-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.35em) rotate(6deg); } }
@keyframes tsp-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes tsp-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes tsp-walk { from { margin-left: -12em; opacity: 0; } to { margin-left: 0; opacity: 1; } }
@keyframes tsp-tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-0.12em); } 75% { transform: translateX(0.12em); } }

/* Whole-body characters (Characters > "On the stage: whole picture"): the picture itself stands on the stage,
   no circle, no emoji. Pictures are drawn facing right; is-flipped turns them. */
.tsp-char.tsp-char-full {
	width: auto;
	height: 50%;
	bottom: 2%;
}
.tsp-char-full.size-s { height: 34%; }
.tsp-char-full.size-l { height: 62%; }
.tsp-char-full.size-xl { height: 76%; }
/* The story tools wrap a character in a "rig" to move it: it takes the character's whole height too. */
.tsp-char-full > .tsp-fx-rig { height: 100%; }
.tsp-full {
	height: 100%;
	animation: tsp-bob-soft 4s ease-in-out infinite;
	transform-origin: 50% 100%;
}
.tsp-body-img {
	display: block;
	height: 100%;
	width: auto;
	max-width: 60cqw;
	object-fit: contain;
	object-position: 50% 100%;
	filter: drop-shadow(0 0.5em 0.6em rgba(35, 48, 90, 0.28));
	transition: filter 0.3s;
	user-select: none;
	-webkit-user-drag: none;
}
.tsp-char-full.is-flipped .tsp-body-img { transform: scaleX(-1); }
.tsp-char-full .tsp-nametag { bottom: -0.6em; font-size: 0.95em; }
.tsp-char-full.is-speaking .tsp-body-img { filter: drop-shadow(0 0 0.35em rgba(255, 210, 63, 0.95)) drop-shadow(0 0.5em 0.6em rgba(35, 48, 90, 0.28)); }
.tsp-char-full.is-speaking .tsp-full { animation: tsp-talk-body 0.5s ease-in-out infinite; }
.tsp-char-full.act-jump .tsp-full, .tsp-char-full.expr-excited .tsp-full { animation: tsp-jump 0.8s ease-out 2; }
.tsp-char-full.act-turn_around .tsp-full { animation: tsp-turn 1.1s ease-in-out 1; }
.tsp-char-full.act-nod .tsp-full { animation: tsp-nod 0.7s ease-in-out 3; }
.tsp-char-full.act-shake_head .tsp-full { animation: tsp-shake 0.6s ease-in-out 2; }
.tsp-char-full.expr-worried .tsp-full { animation: tsp-tremble 0.35s linear infinite; }
.tsp-char-full.expr-sad .tsp-full { animation: none; transform: translateY(2%) scaleY(0.97); }
@keyframes tsp-bob-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }
@keyframes tsp-talk-body { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 0.985); } }

/* No emoji: a character without a picture is a plain figure in their colour. */
.tsp-face-figure { display: grid; place-items: center; width: 72%; height: 72%; }
.tsp-face-figure svg { width: 100%; height: 100%; fill: var(--c); }
.tsp-char.is-speaking .tsp-face-figure { animation: tsp-talk 0.42s ease-in-out infinite; }

/* "Change look" effects, on any character. */
.tsp-char.flt-glow .tsp-body-img, .tsp-char.flt-glow .tsp-face { filter: drop-shadow(0 0 0.5em #fff6a8) drop-shadow(0 0 1.1em #ffd23f); }
.tsp-char.flt-shadow .tsp-body-img, .tsp-char.flt-shadow .tsp-face { filter: drop-shadow(0.8em 0.9em 0.4em rgba(0, 0, 0, 0.45)); }
.tsp-char.flt-ghost { opacity: 0.45; }
.tsp-char.flt-silhouette .tsp-body-img, .tsp-char.flt-silhouette .tsp-face { filter: brightness(0); }
.tsp-char.flt-grey .tsp-body-img, .tsp-char.flt-grey .tsp-face { filter: grayscale(1); }
.tsp-char.flt-dream .tsp-body-img, .tsp-char.flt-dream .tsp-face { filter: blur(1.5px) saturate(0.6) brightness(1.15); opacity: 0.85; }
.tsp-char.is-hidden-look { opacity: 0; visibility: hidden; }
.tsp-still .tsp-full, .tsp-still .tsp-char-full.is-speaking .tsp-full { animation: none; }

/* ------------------------------------------------------------------- bubbles */

.tsp-bubbles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tsp-bubble {
	position: absolute;
	z-index: 5;
	min-width: 12em;
	padding: 0.8em 1.1em;
	border-radius: calc(var(--tsp-bubble-radius) * 0.1em);
	background: var(--tsp-bubble-bg);
	color: var(--tsp-bubble-ink);
	font-size: 1.55em;
	font-weight: 700;
	line-height: 1.3;
	box-shadow: 0 0.25em 0 rgba(35, 48, 90, 0.1), 0 0.6em 1.4em rgba(35, 48, 90, 0.2);
	animation: tsp-pop 0.3s ease-out;
}

.tsp-bubble::after {
	content: "";
	position: absolute;
	left: var(--tail-x, 50%);
	bottom: -0.5em;
	width: 1em;
	height: 1em;
	margin-left: -0.5em;
	background: inherit;
	transform: rotate(45deg);
	border-radius: 0 0 0.25em 0;
}

.tsp-bubble.no-tail::after { display: none; }

.tsp-bubble-name {
	margin-bottom: 0.15em;
	font-size: 0.7em;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.7;
}

.tsp-bubble-text {
	overflow-wrap: anywhere;
}

.tsp-word {
	transition: color 0.15s, background 0.15s;
	color: rgba(35, 48, 90, 0.62);
}

.tsp-word.is-spoken {
	color: var(--tsp-ink);
}

.tsp-bubble-narration {
	background: color-mix(in srgb, var(--tsp-narr-bg) 90%, transparent);
	color: #fff;
	font-weight: 600;
	text-align: center;
	left: 0;
}

.tsp-bubble-narration .tsp-word { color: rgba(255, 255, 255, 0.6); }
.tsp-bubble-narration .tsp-word.is-spoken { color: #fff; }
.tsp-bubble-narration .tsp-bubble-name { opacity: 0.8; }

.tsp-bubble-thought {
	border-radius: 2.4em;
	background: #f4f7ff;
	font-style: italic;
	font-weight: 600;
	box-shadow: 0 0 0 0.15em #c9d4ff, 0 0.6em 1.4em rgba(35, 48, 90, 0.16);
}

.tsp-bubble-thought::after { display: none; }

.tsp-thought-dot {
	position: absolute;
	bottom: -1.2em;
	left: var(--tail-x, 50%);
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	background: #f4f7ff;
	box-shadow: 0 0 0 0.12em #c9d4ff;
}

.tsp-thought-dot-2 {
	bottom: -2.1em;
	width: 0.55em;
	height: 0.55em;
	margin-left: 0.5em;
}

.tsp-bubble-voiceover {
	background: #efe4ff;
	font-style: italic;
}

.tsp-bubble.is-offscreen.tsp-bubble-dialogue,
.tsp-bubble.is-offscreen.tsp-bubble-thought {
	background: #efe4ff;
}

.tsp-bubble.tail-side-left::after { left: 1.6em; }
.tsp-bubble.tail-side-right::after { left: auto; right: 1.6em; }

/* Speech and thought bubbles always show their words: "captions off" used to turn them into grey dashes,
   which teachers read as missing text (the narration box already stayed readable). */

@keyframes tsp-pop {
	from { transform: scale(0.94); opacity: 0.3; }
	to { transform: scale(1); opacity: 1; }
}

/* ----------------------------------------------------------------- controls */

.tsp-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
}

.tsp-ctl-gap { flex: 1; }

.tsp-ctl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	padding: 6px 14px;
	border: max(0px, calc(var(--tsp-btn-border) - 1px)) solid var(--tsp-line);
	border-radius: var(--tsp-btn-radius);
	background: var(--tsp-btn-bg);
	color: var(--tsp-btn-ink);
	font: inherit;
	font-size: 14px;
	font-weight: var(--tsp-fw);
	cursor: pointer;
	box-shadow: 0 calc(var(--tsp-depth) * 0.75) 0 var(--tsp-line);
	zoom: var(--tsp-scale);
	transition: transform 0.1s, box-shadow 0.1s;
}

.tsp-ctl:hover:not(:disabled) { transform: translateY(-1px); }
.tsp-ctl:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 min(1px, var(--tsp-depth)) 0 var(--tsp-line); }
.tsp-ctl:disabled { opacity: 0.45; cursor: not-allowed; }
.tsp-ctl.is-off { opacity: 0.6; text-decoration: line-through; }
.tsp-ctl-glyph { font-size: 17px; line-height: 1; }

.tsp-ctl-play {
	background: var(--tsp-accent);
	border-color: var(--tsp-accent-dark);
	color: var(--tsp-accent-ink);
	box-shadow: 0 calc(var(--tsp-depth) * 0.75) 0 var(--tsp-accent-dark);
}

.tsp-ctl-next { background: var(--tsp-info-bg); }

.tsp-ctl:focus-visible,
.tsp-btn:focus-visible,
.tsp-option:focus-visible,
.tsp-tab:focus-visible,
.tsp-listen:focus-visible {
	outline: 3px solid #4d96ff;
	outline-offset: 3px;
}

/* -------------------------------------------------------------------- panel */

.tsp-panel {
	padding: 18px;
	border-radius: var(--tsp-radius);
	background: var(--tsp-card);
	box-shadow: 0 6px 0 rgba(35, 48, 90, 0.06), 0 8px 24px rgba(35, 48, 90, 0.08);
	min-height: 70px;
	zoom: var(--tsp-scale);
}

.tsp-panel:empty { display: none; }

.tsp-intro { text-align: center; }
.tsp-intro-title { margin: 0 0 4px; font-size: 26px; color: var(--tsp-ink); }
.tsp-intro-meta { margin: 0 0 12px; color: var(--tsp-ink-soft); font-weight: 700; }

.tsp-note {
	margin: 10px 0;
	padding: 10px 14px;
	border-radius: 12px;
	font-weight: 700;
}
.tsp-note.is-success { background: var(--tsp-good-bg); color: #1d7a3b; }
.tsp-note.is-warn { background: var(--tsp-warn-bg); color: #8a3a1f; }

.tsp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 22px;
	border: var(--tsp-btn-border) solid var(--tsp-line);
	border-radius: var(--tsp-btn-radius);
	background: var(--tsp-btn-bg);
	color: var(--tsp-btn-ink);
	font: inherit;
	font-size: 16px;
	font-weight: var(--tsp-fw);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 var(--tsp-depth) 0 var(--tsp-line);
	transition: transform 0.1s, box-shadow 0.1s;
}

.tsp-btn:hover:not(:disabled) { transform: translateY(-2px); }
.tsp-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 min(1px, var(--tsp-depth)) 0 var(--tsp-line); }
.tsp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tsp-btn-primary { background: var(--tsp-accent); border-color: var(--tsp-accent-dark); color: var(--tsp-accent-ink); box-shadow: 0 calc(var(--tsp-depth) + 1px) 0 var(--tsp-accent-dark); }
.tsp-btn-danger { background: #e5484d; border-color: #b5292e; color: #fff; box-shadow: 0 4px 0 #b5292e; }
.tsp-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--tsp-ink-soft); }
.tsp-btn-big { padding: 14px 32px; font-size: 19px; }

.tsp-advance-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 12px;
}

/* ---------------------------------------------------------------- questions */

.tsp-q-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tsp-q-prompt {
	flex: 1;
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--tsp-ink);
}

.tsp-listen {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #eaf1ff;
	font-size: 18px;
	cursor: pointer;
}

.tsp-q-instruction {
	margin: 6px 0 12px;
	color: var(--tsp-ink-soft);
	font-weight: 700;
}

.tsp-q-instruction.is-target {
	padding: 10px 14px;
	border-radius: 14px;
	background: #fff8e6;
	color: var(--tsp-ink);
	font-size: 20px;
}

.tsp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 12px;
}

.tsp-tab {
	padding: 8px 16px;
	border: 2px solid var(--tsp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tsp-ink);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.tsp-tab.is-active {
	background: var(--tsp-ink);
	border-color: var(--tsp-ink);
	color: #fff;
}

.tsp-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.tsp-option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 10px 16px;
	border: var(--tsp-btn-border) solid var(--tsp-line);
	border-radius: min(var(--tsp-btn-radius), 18px);
	background: var(--tsp-btn-bg);
	color: var(--tsp-btn-ink);
	font: inherit;
	font-size: 18px;
	font-weight: var(--tsp-fw);
	text-align: left;
	cursor: pointer;
	box-shadow: 0 var(--tsp-depth) 0 var(--tsp-line);
	animation: tsp-rise 0.35s ease-out both;
	transition: transform 0.1s, background 0.2s, border-color 0.2s;
}

.tsp-option:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--tsp-accent); }
.tsp-option:disabled { cursor: default; }

.tsp-option-letter {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #eaf1ff;
	font-size: 16px;
}

.tsp-option.is-correct,
.tsp-option.is-reveal {
	background: var(--tsp-good-bg);
	border-color: var(--tsp-good);
	box-shadow: 0 4px 0 #a6e3ba;
}

.tsp-option.is-wrong {
	background: var(--tsp-kind-bg);
	border-color: #e8b04d;
	box-shadow: 0 4px 0 #f1d79b;
}

@keyframes tsp-rise {
	from { transform: translateY(12px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.tsp-type,
.tsp-blanks-wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.tsp-type .tsp-btn,
.tsp-blanks-wrap .tsp-btn { align-self: flex-start; }

.tsp-blanks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}

.tsp-input {
	width: 100%;
	padding: 12px 14px;
	border: 3px solid var(--tsp-line);
	border-radius: 14px;
	background: #fff;
	color: var(--tsp-ink);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	resize: vertical;
}

.tsp-input:focus {
	outline: none;
	border-color: var(--tsp-accent);
	box-shadow: 0 0 0 4px rgba(255, 122, 89, 0.2);
}

/* --- speaking --- */

.tsp-speak {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	background: #f6f8ff;
}

.tsp-mic-status {
	padding: 6px 16px;
	border-radius: 999px;
	background: #e6ebff;
	font-size: 15px;
	font-weight: 800;
}

.tsp-mic-status.is-listening { background: #ffe1e1; color: #b5292e; animation: tsp-pulse 1.2s ease-in-out infinite; }
.tsp-mic-status.is-processing { background: #fff4d6; color: #8a5a00; }
.tsp-mic-status.is-completed { background: var(--tsp-good-bg); color: #1d7a3b; }
.tsp-mic-status.is-error { background: var(--tsp-warn-bg); color: #8a3a1f; }

@keyframes tsp-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.4); }
	50% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); }
}

.tsp-meter {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 50px;
	opacity: 0.25;
}

.tsp-meter.is-live { opacity: 1; }
.tsp-meter span { width: 8px; height: 8px; border-radius: 4px; background: #e5484d; transition: height 0.08s; }

.tsp-transcript { max-width: 640px; text-align: center; }

.tsp-mic-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.tsp-rec { font-size: 18px; padding: 14px 28px; }

.tsp-help {
	margin: 0;
	max-width: 560px;
	text-align: center;
	font-size: 13px;
	color: var(--tsp-ink-soft);
}

/* ---------------------------------------------------------------- feedback */

.tsp-feedback { margin-top: 12px; border-radius: 16px; }
.tsp-feedback:empty { display: none; }

.tsp-feedback.is-good,
.tsp-feedback.is-kind,
.tsp-feedback.is-info,
.tsp-feedback.is-warn {
	padding: 14px 16px;
	animation: tsp-pop 0.3s ease-out;
}

.tsp-feedback.is-good { background: var(--tsp-good-bg); color: #1d7a3b; }
.tsp-feedback.is-kind { background: var(--tsp-kind-bg); color: #7a5200; }
.tsp-feedback.is-info { background: var(--tsp-info-bg); color: var(--tsp-ink); }
.tsp-feedback.is-warn { background: var(--tsp-warn-bg); color: #8a3a1f; }

.tsp-feedback-main { font-size: 20px; font-weight: 800; }
.tsp-feedback > div + div { margin-top: 8px; font-size: 16px; font-weight: 600; }

.tsp-tag {
	display: inline-block;
	padding: 1px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	font-weight: 800;
}

.tsp-tag.is-good { color: #1d7a3b; }
.tsp-points { font-weight: 800; }

.tsp-q-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 12px;
}

/* --------------------------------------------------------------------- end */

.tsp-end { text-align: center; }
.tsp-end-title { margin: 0 0 6px; font-size: 26px; color: var(--tsp-ink); }

.tsp-stars { display: flex; justify-content: center; gap: 8px; font-size: 60px; line-height: 1; }

.tsp-star {
	color: #d9dff3;
	opacity: 0;
	animation: tsp-star 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}

.tsp-star.is-on { color: #ffc21a; text-shadow: 0 3px 0 #e59f00; }

@keyframes tsp-star {
	0% { transform: scale(0.2) rotate(-40deg); opacity: 0; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

.tsp-score { display: flex; flex-direction: column; align-items: center; margin: 6px 0 10px; }
.tsp-score-label { font-size: 14px; font-weight: 700; color: var(--tsp-ink-soft); }
.tsp-score-value { font-size: 44px; font-weight: 900; }

.tsp-breakdown {
	max-width: 560px;
	margin: 12px auto 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.tsp-breakdown li { padding: 6px 0; border-bottom: 1px solid #eef1fb; font-weight: 600; }
.tsp-breakdown-score { float: right; font-weight: 800; color: var(--tsp-ink-soft); }

.tsp-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; }
.tsp-confetti span { position: absolute; top: -14px; width: 10px; height: 16px; border-radius: 2px; animation: tsp-fall 1.9s ease-in forwards; }
@keyframes tsp-fall {
	0% { transform: translate(0, 0) rotate(0); opacity: 1; }
	100% { transform: translate(var(--drift, 0), 480px) rotate(620deg); opacity: 0; }
}

/* ------------------------------------------------------------------- phones */

@media (max-width: 720px) {
	.tsp-stage {
		aspect-ratio: 4 / 3;
		font-size: 2.3vw;
		font-size: clamp(8px, 2.3cqw, 14px);
	}

	.tsp-bubble { font-size: 1.35em; }
	.tsp-ctl-label { display: none; }
	.tsp-ctl { padding: 6px 12px; }
	.tsp-ctl-gap { display: none; }
	.tsp-q-prompt { font-size: 19px; }
	.tsp-options { grid-template-columns: 1fr; }
	.tsp-scene-title { display: none; }
	.tsp-char { width: 9.5em; }
}

/* --------------------------------------------------------- calm / no motion */

.tsp-still *,
.tsp-still *::before,
.tsp-still *::after {
	animation: none !important;
	transition: none !important;
}

.tsp-still .tsp-star { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.tutor-ssplush *,
	.tutor-ssplush *::before,
	.tutor-ssplush *::after {
		animation: none !important;
		transition: none !important;
	}

	.tsp-star { opacity: 1; }
}

/* --------------------------------------------------------------- vocabulary */

.tutor-ssplush { --tsp-vocab: #7c3aed; }

.tsp-vocab {
	display: inline;
	margin: 0;
	padding: 0 0.12em;
	border: 0;
	border-radius: 0.3em;
	background: color-mix(in srgb, var(--tsp-vocab) 12%, transparent);
	color: var(--tsp-vocab);
	font: inherit;
	font-weight: 800;
	text-decoration: underline dotted;
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.18em;
	pointer-events: auto;
	cursor: pointer;
}

.tsp-vocab.is-static { cursor: inherit; pointer-events: none; }
.tsp-vocab:hover { background: color-mix(in srgb, var(--tsp-vocab) 22%, transparent); }
.tsp-vocab:focus-visible { outline: 3px solid var(--tsp-vocab); outline-offset: 2px; }

/* Keep the highlight the same wherever the word appears, also while captions are read along. */
.tsp-bubble .tsp-vocab.tsp-word,
.tsp-bubble .tsp-vocab.tsp-word.is-spoken { color: var(--tsp-vocab); }

/* Narration sits on a dark bubble: use the colour as a pill with white text so it stays readable. */
.tsp-bubble-narration .tsp-vocab,
.tsp-bubble-narration .tsp-vocab.tsp-word,
.tsp-bubble-narration .tsp-vocab.tsp-word.is-spoken {
	background: var(--tsp-vocab);
	color: #fff;
	text-decoration: none;
	padding: 0 0.3em;
}


.tsp-q-prompt .tsp-vocab,
.tsp-q-instruction .tsp-vocab { font-weight: 900; }

.tsp-vocab-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(24, 33, 70, 0.55);
	animation: tsp-fade 0.18s ease-out;
}

.tsp-vocab-dialog {
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 20px;
	border-radius: var(--tsp-radius);
	background: #fff;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	animation: tsp-pop 0.25s ease-out;
}

.tsp-vc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tsp-vc-tag { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tsp-ink-soft); }
.tsp-vc-word { margin: 2px 0; font-size: 2rem; line-height: 1.1; color: var(--tsp-vocab); }
.tsp-vc-sub { font-size: 14px; font-weight: 700; color: var(--tsp-ink-soft); }
.tsp-vc-listen { flex: 0 0 auto; }

.tsp-vc-body { display: flex; gap: 14px; align-items: flex-start; }
.tsp-vc-img { width: 120px; height: 120px; flex: 0 0 auto; object-fit: cover; border-radius: 14px; border: 2px solid var(--tsp-line); }
.tsp-vc-text { flex: 1; min-width: 0; }
.tsp-vc-row { margin-bottom: 10px; }
.tsp-vc-row h4 { margin: 0 0 2px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tsp-ink-soft); }
.tsp-vc-row p { margin: 0; font-size: 1.05rem; font-weight: 600; }
.tsp-vc-example { font-style: italic; }
.tsp-listen.is-small { width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 14px; vertical-align: middle; }

.tsp-vc-practice { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--tsp-line); }
.tsp-vc-practice h4 { margin: 0 0 4px; font-size: 14px; font-weight: 900; }
.tsp-vc-q { margin: 0 0 8px; font-weight: 700; }
.tsp-vc-options { margin-bottom: 8px; }
.tsp-vc-feedback { min-height: 1.4em; font-weight: 700; }
.tsp-vc-feedback p { margin: 4px 0 0; font-weight: 600; }
.tsp-vc-feedback.is-good { color: #1b7f3b; }
.tsp-vc-feedback.is-kind { color: var(--tsp-kind); }
.tsp-vc-feedback.is-warn { color: #b3261e; }
.tsp-vocab-dialog .tsp-advance-row { margin-top: 14px; }

.tsp-end-words { margin-top: 16px; text-align: center; }
.tsp-end-words h3 { margin: 0 0 8px; font-size: 1rem; }
.tsp-vc-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tsp-vc-chip {
	min-height: 40px;
	padding: 6px 16px;
	border: 2px solid var(--tsp-vocab);
	border-radius: 999px;
	background: #fff;
	color: var(--tsp-vocab);
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}
.tsp-vc-chip.is-good { background: color-mix(in srgb, var(--tsp-vocab) 12%, #fff); }
.tsp-vc-chip:focus-visible { outline: 3px solid var(--tsp-vocab); outline-offset: 2px; }

@keyframes tsp-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 520px) {
	.tsp-vc-body { flex-direction: column; }
	.tsp-vc-img { width: 100%; height: 160px; }
	.tsp-vc-head { flex-direction: column; }
}

/* ------------------------------------------------------------------- resume */

.tsp-resume-title { margin: 0 0 4px; font-size: 1.3rem; }

/* --------------------------------------------------------------- full screen */

/* Column layout: the stage takes whatever height is left, so the controls and panel stay on screen. */
.tutor-ssplush:fullscreen {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 12px 16px;
	box-sizing: border-box;
	background: #f4f7ff;
}
.tutor-ssplush:-webkit-full-screen {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 12px 16px;
	box-sizing: border-box;
	background: #f4f7ff;
}

.tutor-ssplush:fullscreen > .tsp-top,
.tutor-ssplush:fullscreen > .tsp-controls { flex: 0 0 auto; }
.tutor-ssplush:-webkit-full-screen > .tsp-top,
.tutor-ssplush:-webkit-full-screen > .tsp-controls { flex: 0 0 auto; }

.tutor-ssplush:fullscreen > .tsp-stage-wrap {
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	container-type: size;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
.tutor-ssplush:-webkit-full-screen > .tsp-stage-wrap {
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	container-type: size;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.tutor-ssplush:fullscreen .tsp-stage,
.tutor-ssplush:-webkit-full-screen .tsp-stage {
	width: min(100cqw, 100cqh * 16 / 9);
	min-height: 0;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(35, 48, 90, 0.18);
	background: #cfe8ff;
}

.tutor-ssplush:fullscreen > .tsp-panel {
	flex: 0 1 auto;
	max-height: 38vh;
	overflow: auto;
}
.tutor-ssplush:-webkit-full-screen > .tsp-panel {
	flex: 0 1 auto;
	max-height: 38vh;
	overflow: auto;
}

/* ------------------------------------------------ scene blocks: pictures, GIFs, clips, balloon styles */
/* Shared with the editor's stage preview (flow.css only adds the preview's own frame). */

.tsp-overlays {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.tsp-ov {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
}

.tsp-ov-in { width: 100%; height: 100%; }

.tsp-ov img,
.tsp-ov video,
.tsp-ov iframe,
.tsp-ov .tsp-ov-embed {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 0.9em;
	background: #000;
	box-shadow: 0 0.45em 1.5em rgba(35, 48, 90, 0.3);
}

.tsp-ov img { background: transparent; }
.tsp-ov iframe { aspect-ratio: 16 / 9; }
.tsp-ov .tsp-ov-embed { display: grid; place-items: center; min-height: 6em; color: #fff; font-size: 1.2em; font-weight: 700; }

.tsp-ov-size-small { width: 22%; }
.tsp-ov-size-medium { width: 38%; }
.tsp-ov-size-large { width: 58%; }
.tsp-ov-size-full { inset: 0 !important; width: 100%; height: 100%; transform: none !important; }
.tsp-ov-size-full img,
.tsp-ov-size-full video,
.tsp-ov-size-full iframe { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }

.tsp-ov-pos-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tsp-ov-pos-left { left: 4%; top: 50%; transform: translateY(-50%); }
.tsp-ov-pos-right { right: 4%; top: 50%; transform: translateY(-50%); }
.tsp-ov-pos-top { left: 50%; top: 5%; transform: translateX(-50%); }
.tsp-ov-pos-bottom { left: 50%; bottom: 5%; transform: translateX(-50%); }
.tsp-ov-pos-top_left { left: 4%; top: 5%; }
.tsp-ov-pos-top_right { right: 4%; top: 5%; }
.tsp-ov-pos-bottom_left { left: 4%; bottom: 5%; }
.tsp-ov-pos-bottom_right { right: 4%; bottom: 5%; }

.tsp-ov-fx-fade .tsp-ov-in { animation: tsp-fade-in 0.6s ease-out; }
.tsp-ov-fx-pop .tsp-ov-in { animation: tsp-ov-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
.tsp-ov-fx-slide .tsp-ov-in { animation: tsp-ov-slide 0.55s ease-out; }
.tsp-ov-fx-zoom .tsp-ov-in { animation: tsp-zoom-in 0.6s ease-out; }
.tsp-ov.is-leaving .tsp-ov-in { animation: tsp-ov-out 0.35s ease-in forwards; }
@keyframes tsp-ov-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tsp-ov-slide { from { transform: translateY(18%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tsp-ov-out { from { opacity: 1; } to { opacity: 0; } }

/* a background picture / clip that replaces the scene's own from some point on */
.tsp-bg-swap { position: absolute; inset: 0; background-size: cover; background-position: center; animation: tsp-fade-in 0.7s ease-out; }

/* whisper, shout and caption balloons (a speech balloon and a thought cloud already exist) */
.tsp-bubble--whisper {
	border: 0.14em dashed #8f9cd0;
	background: #f7f9ff;
	color: #4b5680;
	font-size: 1.28em;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: none;
}
.tsp-bubble--whisper .tsp-word { color: rgba(75, 86, 128, 0.55); }
.tsp-bubble--whisper .tsp-word.is-spoken { color: #4b5680; }
.tsp-bubble--whisper::after { display: none; }

.tsp-bubble--shout {
	padding: 1.15em 2em;
	background: #ffe14d;
	color: #7a1414;
	font-size: 1.8em;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	box-shadow: none;
	border-radius: 0;
	clip-path: polygon(0% 12%, 6% 0%, 14% 10%, 24% 0%, 33% 10%, 43% 0%, 52% 10%, 62% 0%, 71% 10%, 81% 0%, 90% 10%, 100% 4%, 96% 30%, 100% 50%, 96% 72%, 100% 96%, 88% 88%, 78% 100%, 68% 90%, 57% 100%, 47% 90%, 36% 100%, 26% 90%, 16% 100%, 6% 90%, 0% 96%, 4% 70%, 0% 50%, 4% 28%);
	animation: tsp-pop 0.3s ease-out, tsp-shout 0.4s ease-in-out 0.3s 2;
}
.tsp-bubble--shout .tsp-word { color: rgba(122, 20, 20, 0.5); }
.tsp-bubble--shout .tsp-word.is-spoken { color: #7a1414; }
.tsp-bubble--shout .tsp-bubble-name { color: #7a1414; }
.tsp-bubble--shout::after { display: none; }
@keyframes tsp-shout { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-0.15em) rotate(-1deg); } 75% { transform: translateX(0.15em) rotate(1deg); } }

.tsp-bubble--caption {
	background: rgba(24, 33, 70, 0.9);
	color: #fff;
	font-weight: 600;
	text-align: center;
}
.tsp-bubble--caption .tsp-word { color: rgba(255, 255, 255, 0.6); }
.tsp-bubble--caption .tsp-word.is-spoken { color: #fff; }

/* the player waits for "Continue" after an online video (its end cannot be known) */
.tsp-continue-row { display: flex; justify-content: center; margin: 0.6em 0; }

@media (prefers-reduced-motion: reduce) {
	.tsp-ov-in, .tsp-bubble--shout, .tsp-bg-swap { animation: none !important; }
}
.tsp-still .tsp-ov-in, .tsp-still .tsp-bubble--shout, .tsp-still .tsp-bg-swap { animation: none !important; }

/* a character arriving when its block is reached */
.tsp-char-enter { animation: tsp-char-in 0.55s ease-out; }
@keyframes tsp-char-in { from { opacity: 0; margin-bottom: -3em; } to { opacity: 1; margin-bottom: 0; } }
.tsp-still .tsp-char-enter { animation: none; }

/* transition blocks: a coloured cover over the stage */
.tsp-trans { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: var(--tr-color, #000); opacity: 0; }
.tsp-trans-fade { animation: tsp-tr-fade var(--tr-ms, 1s) ease-in-out forwards; }
.tsp-trans-flash { animation: tsp-tr-flash var(--tr-ms, 1s) ease-out forwards; --tr-color: #fff; }
.tsp-trans-wipe { opacity: 1; transform: translateX(-101%); animation: tsp-tr-wipe var(--tr-ms, 1s) ease-in-out forwards; }
.tsp-trans-zoom { opacity: 1; border-radius: 50%; transform: scale(0); animation: tsp-tr-zoom var(--tr-ms, 1s) ease-in-out forwards; }
@keyframes tsp-tr-fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes tsp-tr-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tsp-tr-wipe { 0% { transform: translateX(-101%); } 50% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes tsp-tr-zoom { 0% { transform: scale(0); } 50% { transform: scale(2.6); } 100% { transform: scale(0); } }

/* narration: shown in a white box between the stage and the controls, no name */
.tsp-narration-box {
	margin: 12px 0 0;
	font-size: clamp(1.1rem, 0.85rem + 1.1vw, 1.5rem);
	line-height: 1.45;
}
.tsp-narration-box:empty { display: none; }
/* while the story's lines play, an empty box keeps its space so the controls never jump
   (not on the start card, a question or the end screen, which need the room) */
.tsp-has-narration .tsp-narration-box:empty { display: block; min-height: calc(2.95em + 4px); }
.tsp-has-narration .tsp-narration-box:empty:has(~ .tsp-panel :is(.tsp-intro, .tsp-question, .tsp-end)) { display: none; }
.tsp-narration-box .tsp-bubble.tsp-bubble-narration {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	max-width: none !important;
	min-height: calc(2.95em + 4px);
	margin: 0;
	padding: 0.75em 2.6em;
	border: 2px solid var(--tsp-line);
	border-radius: var(--tsp-radius, 18px);
	background: var(--tsp-card);
	color: var(--tsp-ink);
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	text-wrap: balance;
	box-shadow: 0 4px 0 var(--tsp-line);
	animation: tsp-narr-in 0.22s ease-out;
	transition: border-color 0.2s;
}
.tsp-narration-box .tsp-bubble-narration.is-speaking { border-color: color-mix(in srgb, var(--tsp-accent) 45%, var(--tsp-line)); }
.tsp-narration-box .tsp-bubble-narration .tsp-bubble-text { max-width: 44em; margin: 0 auto; }
.tsp-narration-box .tsp-bubble-narration::after { display: none; }
@keyframes tsp-narr-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tsp-still .tsp-narration-box .tsp-bubble-narration { animation: none; }

/* read-along: words still to come are soft but readable, the word being read gets a marker */
.tsp-narration-box .tsp-bubble-narration .tsp-word { color: var(--tsp-ink-soft); border-radius: 0.25em; }
.tsp-narration-box .tsp-bubble-narration .tsp-word.is-spoken { color: var(--tsp-ink); }
.tsp-narration-box .tsp-bubble-narration .tsp-word.is-current { background: var(--tsp-kind-bg); box-shadow: 0 0 0 0.12em var(--tsp-kind-bg); }
.tsp-narration-box .tsp-bubble-narration .tsp-vocab.tsp-word,
.tsp-narration-box .tsp-bubble-narration .tsp-vocab.tsp-word.is-spoken {
	background: color-mix(in srgb, var(--tsp-vocab) 12%, transparent);
	color: var(--tsp-vocab);
	padding: 0 0.12em;
	text-decoration: underline dotted;
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.18em;
}
.tsp-narration-box .tsp-bubble-narration .tsp-vocab.tsp-word.is-current { background: color-mix(in srgb, var(--tsp-vocab) 24%, transparent); box-shadow: none; }
/* the narration box is the story's reading text: it stays readable even with Captions off (no grey blocks) */
.tsp-no-captions .tsp-narration-box .tsp-bubble-text { height: auto; overflow: visible; color: inherit; }
.tsp-no-captions .tsp-narration-box .tsp-bubble-narration .tsp-word { color: var(--tsp-ink-soft); background: none; margin-right: 0; }
.tsp-no-captions .tsp-narration-box .tsp-bubble-narration .tsp-word.is-spoken { color: var(--tsp-ink); }
.tsp-no-captions .tsp-narration-box .tsp-bubble-narration .tsp-word.is-current { background: var(--tsp-kind-bg); }
.tsp-no-captions .tsp-narration-box .tsp-bubble-narration .tsp-vocab.tsp-word { color: var(--tsp-vocab); background: color-mix(in srgb, var(--tsp-vocab) 12%, transparent); }

/* the narrator's sound-wave: moves while the line is read, rests afterwards */
.tsp-narr-wave {
	position: absolute;
	left: 0.9em;
	top: 50%;
	display: flex;
	align-items: center;
	gap: 0.12em;
	height: 1em;
	margin-top: -0.5em;
}
.tsp-narr-wave i {
	display: block;
	width: 0.16em;
	height: 0.35em;
	border-radius: 0.1em;
	background: var(--tsp-line);
	transition: background 0.2s;
}
.tsp-bubble-narration.is-speaking .tsp-narr-wave i { background: var(--tsp-accent); animation: tsp-narr-wave 0.9s ease-in-out infinite; }
.tsp-bubble-narration.is-speaking .tsp-narr-wave i:nth-child(2) { animation-delay: -0.3s; }
.tsp-bubble-narration.is-speaking .tsp-narr-wave i:nth-child(3) { animation-delay: -0.6s; }
@keyframes tsp-narr-wave { 0%, 100% { height: 0.35em; } 50% { height: 1em; } }
.tsp-still .tsp-bubble-narration.is-speaking .tsp-narr-wave i { animation: none; height: 0.7em; }

@media (max-width: 480px) {
	.tsp-narration-box .tsp-bubble.tsp-bubble-narration { padding: 0.6em 2em; }
	.tsp-narr-wave { left: 0.65em; }
}
@media (prefers-reduced-motion: reduce) {
	.tsp-narration-box .tsp-bubble-narration { animation: none; }
	.tsp-bubble-narration.is-speaking .tsp-narr-wave i { animation: none; height: 0.7em; }
}

/* full screen: bigger reading text */
.tutor-ssplush:fullscreen > .tsp-narration-box { flex: 0 0 auto; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); }
.tutor-ssplush:-webkit-full-screen > .tsp-narration-box { flex: 0 0 auto; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); }

/* Keep scene pictures, GIFs and clips inside the stage, and the player's own bars above them. */
.tsp-stage-wrap { isolation: isolate; }
.tsp-stage { contain: paint; }
.tutor-ssplush:fullscreen > .tsp-stage-wrap { overflow: hidden; }
.tutor-ssplush:-webkit-full-screen > .tsp-stage-wrap { overflow: hidden; }
.tutor-ssplush > .tsp-narration-box,
.tutor-ssplush > .tsp-controls,
.tutor-ssplush > .tsp-panel {
	position: relative;
	z-index: 20;
}

/* author highlights (narration and bubbles): "coloured" writes the words in the colour; marker, underline,
   circle and pop are in bubbles.css */
.tsp-word.tsp-hl-color,
.tsp-narration-box .tsp-bubble-narration .tsp-word.tsp-hl-color { color: var(--tsp-hl); opacity: 0.6; }
.tsp-word.tsp-hl-color.is-spoken,
.tsp-narration-box .tsp-bubble-narration .tsp-word.tsp-hl-color.is-spoken { color: var(--tsp-hl); opacity: 1; }
.tsp-word.tsp-hl-b,
.tsp-narration-box .tsp-bubble-narration .tsp-word.tsp-hl-b { font-weight: 800; }

/* author bubble layout: hidden, arrow direction */
.tsp-bubble.is-hidden { visibility: hidden; }
.tsp-bubble.tail-none::after { display: none; }
.tsp-bubble.tail-up::after { top: -0.5em; bottom: auto; border-radius: 0.25em 0 0 0; }
.tsp-bubble.tail-left::after { left: -0.5em !important; right: auto; top: 50%; bottom: auto; margin: -0.5em 0 0; border-radius: 0 0 0 0.25em; }
.tsp-bubble.tail-right::after { left: auto !important; right: -0.5em; top: 50%; bottom: auto; margin: -0.5em 0 0; border-radius: 0 0.25em 0 0; }

/* ---- points, grade and tries (2.26) */
.tsp-q-worth { flex: none; align-self: center; padding: 3px 10px; border-radius: 999px; background: #fff4cc; color: #7a5200; font-size: 13px; font-weight: 800; white-space: nowrap; }
.tsp-pts-intro { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 6px 0 12px; font-weight: 700; color: var(--tsp-ink-soft); }
.tsp-pts-total { color: #7a5200; }
.tsp-score-points { margin-top: 2px; font-size: 16px; font-weight: 800; color: #7a5200; }
.tsp-score-grade { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--tsp-ink-soft); }

/* Sound credits (CC BY sounds from the Sound Library) at the end. */
.tsp-credits { margin-top: 14px; font-size: 12px; color: #6a6f7b; text-align: left; }
.tsp-credits summary { cursor: pointer; font-weight: 600; }
.tsp-credits ul { margin: 6px 0 0; padding-left: 18px; }
.tsp-credits a { color: inherit; }

/* The editor's "Point at something" (Magic): what the teacher points at is chosen, not used. */
html.tsp-picking, html.tsp-picking * { cursor: crosshair !important; }
html.tsp-picking .tsp-bubble:hover, html.tsp-picking .tsp-question:hover, html.tsp-picking .tsp-qk:hover { outline: 3px dashed #7c3aed; outline-offset: 3px; }

/* Magic 2.42: stars for scenes answered right, "Listen again", hints in steps */
.tsp-dot.is-star { background: #ffd54a; border-color: #f2b705; }
.tsp-dot.is-star::after { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #8a5a00; }
.tsp-stars { align-self: center; margin-left: 4px; font-size: 13px; font-weight: 800; color: #8a5a00; white-space: nowrap; }
.tsp-listen-again { background: #eef2ff; }

/* Multiple choice with a voice: the question is read first, then the choices appear. */
.tsp-options[hidden] { display: none; }
.tsp-q-listen-first {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 12px 16px;
	border: 3px dashed var(--tsp-line);
	border-radius: 18px;
	color: var(--tsp-ink-soft);
	font-weight: 800;
}
.tsp-q-listen-first .tsp-btn { margin-left: auto; }
.tsp-q-listen-first .tsp-narr-wave { position: static; margin: 0; font-size: 22px; }
.tsp-q-listen-first .tsp-narr-wave i { background: var(--tsp-accent); animation: tsp-narr-wave 0.9s ease-in-out infinite; }
.tsp-q-listen-first .tsp-narr-wave i:nth-child(2) { animation-delay: -0.3s; }
.tsp-q-listen-first .tsp-narr-wave i:nth-child(3) { animation-delay: -0.6s; }
.tsp-still .tsp-q-listen-first .tsp-narr-wave i { animation: none; height: 0.7em; }


/* ------------------------------------------------------------- Player Theme */

.tutor-ssplush[data-tsp-ctl-labels="hide"] .tsp-ctl-label { display: none; }
.tsp-ctl-glyph { display: inline-flex; align-items: center; justify-content: center; }
.tsp-ctl-glyph .tsp-ic { display: block; width: 1.25em; height: 1.25em; }
.tsp-ic .f { fill: none; }
.tsp-ic-solid .f, .tsp-ic-chunky .f { fill: currentColor; }
.tsp-ic-solid { stroke-width: 1.6; }