/**
 * Story Studio Plush - the newer question kinds (true or false, match, spell, puzzle...).
 *
 * 1. Learner player (.tsp-qk-*): big, friendly, touch-sized cards in the player's own colours.
 * 2. Editor (.tsp-qke-*): the teacher's side, in the builder's look.
 * 3. The grouped "Questions" menu of the scene toolbar.
 */

/* ============================================================== 1. player */

.tutor-ssplush .tsp-qk { --qk-good: var(--tsp-good, #2fb457); --qk-good-bg: var(--tsp-good-bg, #e6f9ec); --qk-bad: #e8b04d; --qk-bad-bg: var(--tsp-kind-bg, #fff4d6); --qk-line: var(--tsp-line, #d7defa); --qk-accent: var(--tsp-accent, #ff7a59); }

.tsp-qk-figure { margin: 4px 0 12px; text-align: center; }
.tsp-qk-figure img { max-width: 100%; max-height: 260px; border-radius: 16px; box-shadow: 0 4px 0 rgba(35, 48, 90, 0.08); object-fit: contain; }

.tsp-qk-hint { margin: 0 0 10px; color: var(--tsp-ink-soft); font-weight: 800; }

.tsp-qk-checkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.tsp-qk-check:disabled { opacity: 0.45; }

/* Cards (answers, pairs) and tiles (words, letters, steps) */
.tsp-qk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.tsp-qk-card,
.tsp-qk-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 3px solid var(--qk-line);
	background: #fff;
	color: var(--tsp-ink);
	font: inherit;
	font-weight: 800;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 0 var(--qk-line);
	animation: tsp-qk-rise 0.35s ease-out both;
	animation-delay: calc(var(--i, 0) * 60ms);
	transition: transform 0.12s, background 0.2s, border-color 0.2s, box-shadow 0.12s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.tsp-qk-card { min-height: 72px; padding: 12px 14px; border-radius: 20px; font-size: 19px; }
.tsp-qk-tile { min-height: 50px; min-width: 50px; padding: 8px 14px; border-radius: 14px; font-size: 20px; }
.tsp-qk-card:hover:not(:disabled),
.tsp-qk-tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--qk-accent); }
.tsp-qk-card:active:not(:disabled),
.tsp-qk-tile:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--qk-line); }
.tsp-qk-card:disabled,
.tsp-qk-tile:disabled { cursor: default; }
.tsp-qk-card:focus-visible,
.tsp-qk-tile:focus-visible,
.tsp-qk-tf-btn:focus-visible,
.tsp-qk-speaker:focus-visible,
.tsp-qk-pin:focus-visible,
.tsp-qk-piece:focus-visible,
.tsp-qk-flash:focus-visible,
.tsp-qk-step:focus-visible,
.tsp-qk-hear:focus-visible,
.tsp-qk-mark:focus-visible { outline: 3px solid #4d96ff; outline-offset: 3px; }

.tsp-qk-img { display: block; width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: contain; border-radius: 12px; pointer-events: none; }
.tsp-qk-tile .tsp-qk-img { max-width: 90px; }
.tsp-qk-card.has-image { padding-top: 10px; }
.tsp-qk-text { overflow-wrap: anywhere; }

.tsp-qk-hear {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #eaf1ff;
	font-size: 14px;
	cursor: pointer;
}

.tsp-qk-card.is-good,
.tsp-qk-tile.is-good,
.tsp-qk-pin.is-good,
.tsp-qk-piece.is-good { border-color: var(--qk-good) !important; background-color: var(--qk-good-bg); box-shadow: 0 4px 0 #a6e3ba; }
.tsp-qk-card.is-bad,
.tsp-qk-tile.is-bad,
.tsp-qk-pin.is-bad,
.tsp-qk-piece.is-bad { border-color: var(--qk-bad) !important; background-color: var(--qk-bad-bg); box-shadow: 0 4px 0 #f1d79b; }
.tsp-qk-card.is-good::after,
.tsp-qk-tile.is-good::after { content: "✓"; position: absolute; top: -10px; left: -10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--qk-good); color: #fff; font-size: 14px; }

@keyframes tsp-qk-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tsp-qk-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes tsp-qk-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 89, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(255, 122, 89, 0); } }

/* True or false */
.tsp-qk-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tsp-qk-tf-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 18px 12px;
	border: 3px solid;
	border-radius: 24px;
	font: inherit;
	font-size: 22px;
	font-weight: 900;
	cursor: pointer;
	animation: tsp-qk-rise 0.35s ease-out both;
	animation-delay: calc(var(--i, 0) * 80ms);
	transition: transform 0.12s;
}
.tsp-qk-tf-btn.is-yes { border-color: #7fd39a; background: #effbf2; color: #1d7a3b; box-shadow: 0 5px 0 #a6e3ba; }
.tsp-qk-tf-btn.is-no { border-color: #f5a3a3; background: #fff1f1; color: #a33030; box-shadow: 0 5px 0 #f7c4c4; }
.tsp-qk-tf-btn:hover:not(:disabled) { transform: translateY(-3px); }
.tsp-qk-tf-btn:disabled { cursor: default; opacity: 0.75; }
.tsp-qk-tf-btn.is-correct { opacity: 1; outline: 4px solid var(--tsp-good); }
.tsp-qk-tf-btn.is-wrong { opacity: 1; outline: 4px solid #e8b04d; }
.tsp-qk-tf-ico { font-size: 42px; line-height: 1; }

/* Listen and choose / spell: the big speaker */
.tsp-qk-listen { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tsp-qk-listen .tsp-qk-cards { width: 100%; }
.tsp-qk-speaker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--tsp-accent, #ff7a59);
	color: #fff;
	font: inherit;
	font-size: 20px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 5px 0 var(--tsp-accent-dark, #e05a38);
}
.tsp-qk-speaker.is-small { padding: 10px 18px; font-size: 16px; margin-bottom: 12px; }
.tsp-qk-speaker-ico { font-size: 1.5em; line-height: 1; }
.tsp-qk-speaker.is-pulse { animation: tsp-qk-pulse 0.9s ease-out; }
.tsp-qk-card.is-correct { border-color: var(--tsp-good); background: var(--tsp-good-bg); box-shadow: 0 4px 0 #a6e3ba; }
.tsp-qk-card.is-wrong { border-color: #e8b04d; background: var(--tsp-kind-bg); box-shadow: 0 4px 0 #f1d79b; }
.tsp-qk-card.is-reveal { border-color: var(--tsp-good); border-style: dashed; }

/* Pick all that fit */
.tsp-qk-card.is-toggle .tsp-qk-tick { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 26px; height: 26px; border: 3px solid var(--qk-line); border-radius: 8px; background: #fff; color: transparent; font-size: 15px; }
.tsp-qk-card.is-picked { border-color: #4d96ff; background: #eef5ff; box-shadow: 0 4px 0 #b9d4ff; }
.tsp-qk-card.is-picked .tsp-qk-tick { border-color: #4d96ff; background: #4d96ff; color: #fff; animation: tsp-qk-pop 0.25s; }

/* Match the pairs */
.tsp-qk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tsp-qk-col { display: flex; flex-direction: column; gap: 10px; }
.tsp-qk-col-title { color: var(--tsp-ink-soft); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.tsp-qk-card.is-match { flex-direction: row; min-height: 62px; padding: 10px 14px 10px 44px; font-size: 18px; }
.tsp-qk-card.is-match .tsp-qk-img { width: 64px; max-width: 64px; }
.tsp-qk-badge { position: absolute; left: 10px; top: calc(50% - 13px); display: grid; place-items: center; width: 26px; height: 26px; border: 3px dashed var(--qk-line); border-radius: 50%; color: #fff; font-size: 13px; font-weight: 900; }
.tsp-qk-card.is-active { border-color: #4d96ff; background: #eef5ff; transform: scale(1.03); box-shadow: 0 0 0 4px rgba(77, 150, 255, 0.25), 0 4px 0 #b9d4ff; }
.tsp-qk-col.is-waiting .tsp-qk-card:not(.is-paired) { border-style: dashed; border-color: #4d96ff; }
.tsp-qk-card.is-paired .tsp-qk-badge { border-style: solid; animation: tsp-qk-pop 0.25s; }
.tsp-qk-card.is-c0 { border-color: #4d96ff; } .tsp-qk-card.is-c0 .tsp-qk-badge { background: #4d96ff; border-color: #4d96ff; }
.tsp-qk-card.is-c1 { border-color: #a15cf0; } .tsp-qk-card.is-c1 .tsp-qk-badge { background: #a15cf0; border-color: #a15cf0; }
.tsp-qk-card.is-c2 { border-color: #f07c1a; } .tsp-qk-card.is-c2 .tsp-qk-badge { background: #f07c1a; border-color: #f07c1a; }
.tsp-qk-card.is-c3 { border-color: #1aa6a6; } .tsp-qk-card.is-c3 .tsp-qk-badge { background: #1aa6a6; border-color: #1aa6a6; }
.tsp-qk-card.is-c4 { border-color: #e0468a; } .tsp-qk-card.is-c4 .tsp-qk-badge { background: #e0468a; border-color: #e0468a; }
.tsp-qk-card.is-c5 { border-color: #6b8e23; } .tsp-qk-card.is-c5 .tsp-qk-badge { background: #6b8e23; border-color: #6b8e23; }

/* Tap into a line: put in order, build the sentence, spell the word */
.tsp-qk-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 68px;
	margin-bottom: 14px;
	padding: 10px 12px;
	border: 3px dashed var(--qk-line);
	border-radius: 18px;
	background: #f7f9ff;
}
.tsp-qk-line-hint { color: var(--tsp-ink-soft); font-weight: 700; }
.tsp-qk-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tsp-qk-tile[hidden] { display: none; }
.tsp-qk-tile.is-placed { animation: tsp-qk-pop 0.22s ease-out; }
.tsp-qk-slot { display: grid; place-items: center; min-width: 50px; min-height: 50px; border: 3px dashed #c3cdf0; border-radius: 14px; color: #a5b0d6; font-weight: 900; }
.tsp-qk-punct { font-size: 24px; font-weight: 900; color: var(--tsp-ink-soft); }
.tsp-qk-num { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 50%; background: var(--tsp-ink, #23305a); color: #fff; font-size: 13px; }
.tsp-qk-order .tsp-qk-tile { flex-direction: row; font-size: 17px; text-align: left; }
.tsp-qk-order-line { flex-direction: column; align-items: stretch; }
.tsp-qk-order-line .tsp-qk-slot { min-height: 46px; justify-content: start; padding-left: 14px; }
.tsp-qk-order-line .tsp-qk-tile { justify-content: flex-start; }
.tsp-qk-spell-line { justify-content: center; }
.tsp-qk-spell-tile,
.tsp-qk-spell-slot { width: 52px; min-width: 52px; height: 58px; padding: 0; font-size: 28px; text-transform: none; }
.tsp-qk-gap { width: 18px; }
.tsp-qk-spell-wrap { text-align: center; }

/* Pictures: find it, label it */
.tsp-qk-pic { position: relative; width: 100%; max-width: 640px; margin: 0 auto 10px; aspect-ratio: calc(1 / var(--ratio, 0.75)); border-radius: 18px; overflow: hidden; background: #eef2fb; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tsp-qk-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.tsp-qk-hot { cursor: crosshair; box-shadow: 0 0 0 3px var(--qk-line); }
.tsp-qk-mark { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: rgba(255, 122, 89, 0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); cursor: pointer; animation: tsp-qk-pop 0.25s; }
.tsp-qk-mark.is-good { background: var(--tsp-good); }
.tsp-qk-mark.is-bad { background: #e8b04d; }
.tsp-qk-ring { position: absolute; aspect-ratio: 1; border: 4px dashed var(--tsp-good); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: tsp-qk-pop 0.4s; }
.tsp-qk-pin { position: absolute; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px 4px 4px; border: 3px solid #fff; border-radius: 999px; background: rgba(35, 48, 90, 0.88); color: #fff; font: inherit; font-weight: 800; transform: translate(-20px, -50%); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.tsp-qk-pin-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--tsp-ink); font-size: 14px; }
.tsp-qk-pin-word:empty { display: none; }
.tsp-qk-pin.has-word { background: #4d96ff; }
.tsp-qk-pin.is-good { background: var(--tsp-good); color: #fff; }
.tsp-qk-pin.is-bad { background: #d9951c; color: #fff; }
.tsp-qk-pin-fix { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--tsp-good); font-size: 14px; }
.tsp-qk-chip.is-active { border-color: #4d96ff; background: #eef5ff; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(77, 150, 255, 0.25); }

/* Number slider */
.tsp-qk-slider { text-align: center; }
.tsp-qk-value { display: block; margin-bottom: 8px; color: var(--tsp-ink); font-weight: 900; }
.tsp-qk-value-n { font-size: 56px; line-height: 1; }
.tsp-qk-value-unit { font-size: 24px; color: var(--tsp-ink-soft); }
.tsp-qk-slider-row { display: flex; align-items: center; gap: 12px; }
.tsp-qk-step { flex: none; width: 52px; height: 52px; border: 3px solid var(--qk-line); border-radius: 50%; background: #fff; color: var(--tsp-ink); font: inherit; font-size: 28px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 4px 0 var(--qk-line); }
.tsp-qk-range { flex: 1; min-width: 0; height: 18px; border-radius: 999px; background: linear-gradient(to right, var(--qk-accent) var(--pct, 50%), #e3e8f7 var(--pct, 50%)); -webkit-appearance: none; appearance: none; cursor: pointer; }
.tsp-qk-range::-webkit-slider-thumb { width: 40px; height: 40px; border: 5px solid #fff; border-radius: 50%; background: var(--qk-accent); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); -webkit-appearance: none; appearance: none; }
.tsp-qk-range::-moz-range-thumb { width: 32px; height: 32px; border: 5px solid #fff; border-radius: 50%; background: var(--qk-accent); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
.tsp-qk-slider-ends { display: flex; justify-content: space-between; padding: 4px 64px 0; color: var(--tsp-ink-soft); font-weight: 800; }
.tsp-qk-slider .tsp-qk-checkrow { justify-content: center; }
.tsp-qk-direction { margin-top: 8px; font-weight: 900; font-size: 18px; }

/* Picture puzzle */
.tsp-qk-puzzle { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 3px; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: calc(1 / var(--ratio, 0.75)); padding: 3px; border-radius: 16px; background: #d7defa; }
.tsp-qk-piece { position: relative; padding: 0; border: 0; border-radius: 6px; background-color: #eef2fb; background-repeat: no-repeat; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.tsp-qk-piece.is-selected { z-index: 1; transform: scale(1.06); box-shadow: 0 0 0 4px #4d96ff, 0 8px 18px rgba(0, 0, 0, 0.25); }
.tsp-qk-piece.is-good { box-shadow: inset 0 0 0 4px var(--tsp-good); }
.tsp-qk-piece.is-bad { box-shadow: inset 0 0 0 4px #e8b04d; }
.tsp-qk-puzzle.is-solved { gap: 0; padding: 0; background: transparent; transition: gap 0.4s, padding 0.4s; }
.tsp-qk-puzzle.is-solved .tsp-qk-piece { border-radius: 0; }
.tsp-qk-peek-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border-radius: 16px; object-fit: fill; animation: tsp-qk-rise 0.2s; }
.tsp-qk-puzzlewrap .tsp-qk-checkrow { justify-content: center; }

/* Flashcard */
.tsp-qk-flashwrap { display: flex; flex-direction: column; align-items: center; }
.tsp-qk-flash { width: min(100%, 360px); height: 260px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; perspective: 1000px; }
.tsp-qk-flash-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1); }
.tsp-qk-flash.is-turned .tsp-qk-flash-in { transform: rotateY(180deg); }
.tsp-qk-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; border: 4px solid var(--qk-line); border-radius: 24px; background: #fff; box-shadow: 0 6px 0 var(--qk-line); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tsp-qk-face.is-back { background: #fff8e6; border-color: #f3d58a; box-shadow: 0 6px 0 #f3d58a; transform: rotateY(180deg); }
.tsp-qk-face .tsp-qk-img { max-width: 150px; max-height: 150px; }
.tsp-qk-flash-word { color: var(--tsp-ink); font-size: 30px; font-weight: 900; }
.tsp-qk-flash-back { color: var(--tsp-ink); font-size: 22px; font-weight: 800; }
.tsp-qk-flash-hear { display: flex; gap: 10px; margin-top: 12px; }
.tsp-qk-flash-hear .tsp-qk-hear { position: static; width: 44px; height: 44px; font-size: 18px; }
.tsp-qk-flashwrap .tsp-qk-checkrow { justify-content: center; }

/* Small screens */
@media (max-width: 520px) {
	.tsp-qk-cols { gap: 10px; }
	.tsp-qk-card.is-match { padding-left: 40px; font-size: 16px; }
	.tsp-qk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsp-qk-spell-tile, .tsp-qk-spell-slot { width: 42px; min-width: 42px; height: 48px; font-size: 22px; }
	.tsp-qk-slider-ends { padding: 4px 64px 0; }
	.tsp-qk-tf-btn { font-size: 18px; }
}

/* Less motion */
.tsp-still .tsp-qk-card, .tsp-still .tsp-qk-tile, .tsp-still .tsp-qk-tf-btn, .tsp-still .tsp-qk-mark, .tsp-still .tsp-qk-ring,
.tsp-still .tsp-qk-speaker.is-pulse, .tsp-still .tsp-qk-badge { animation: none !important; }
.tsp-still .tsp-qk-flash-in { transition: none; }
@media (prefers-reduced-motion: reduce) {
	.tsp-qk-card, .tsp-qk-tile, .tsp-qk-tf-btn, .tsp-qk-mark, .tsp-qk-ring, .tsp-qk-speaker.is-pulse { animation: none !important; }
	.tsp-qk-flash-in { transition: none; }
}

/* ============================================================== 2. editor */

.tsp-qke { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 14px; }
.tsp-qke-how { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff6ee; color: #5a4632; font-size: 13px; line-height: 1.4; }
.tsp-qke-how-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #ff9f43; color: #fff; font-size: 17px; }
.tsp-qke-how-text { flex: 1; }
.tsp-qke-how .tsp-b-btn { flex: none; white-space: nowrap; }

.tsp-qke-list { display: flex; flex-direction: column; gap: 8px; }
.tsp-qke-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e3e7f2; border-radius: 12px; background: #fff; }
.tsp-qke-row.is-right { border-color: #9ad8ae; background: #f3fbf5; }
.tsp-qke-row.is-selected { border-color: #4d96ff; box-shadow: 0 0 0 2px rgba(77, 150, 255, 0.2); }
.tsp-qke-row > .tsp-b-input { flex: 1; min-width: 0; }
.tsp-qke-right { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; font-weight: 700; color: #3d7a50; }
.tsp-qke-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef1f8; color: #4b5162; font-size: 12px; font-weight: 800; }
.tsp-qke-n.is-right { background: #2fb457; color: #fff; }
.tsp-qke-n.is-trap { background: #e5484d; color: #fff; }
.tsp-qke-link { flex: none; color: #a0a8bd; }
.tsp-qke-mini { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid #e3e7f2; border-radius: 9px; background: #fff; color: #4b5162; cursor: pointer; }
.tsp-qke-mini:hover:not(:disabled) { background: #f1f3f9; }
.tsp-qke-mini:disabled { opacity: 0.35; cursor: default; }

.tsp-qke-thumb { position: relative; flex: none; width: 40px; height: 40px; }
.tsp-qke-thumb-add { width: 40px; height: 40px; padding: 0; border: 1px dashed #b9c1d6; border-radius: 10px; background: #f8f9fc; color: #7a8299; cursor: pointer; }
.tsp-qke-thumb-add:hover { border-color: #4d96ff; color: #4d96ff; }
.tsp-qke-thumb img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.tsp-qke-thumb-x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #1d2135; color: #fff; font-size: 9px; cursor: pointer; }

.tsp-qke-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tsp-qke-seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #d9deea; border-radius: 999px; background: #fff; color: #333a4d; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tsp-qke-seg-btn.is-on { border-color: #1d2135; background: #1d2135; color: #fff; }
.tsp-qke-seg-btn.is-yes.is-on { border-color: #2fb457; background: #2fb457; }
.tsp-qke-seg-btn.is-no.is-on { border-color: #e5484d; background: #e5484d; }

.tsp-qke-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tsp-qke-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tsp-qke-big { font-size: 16px !important; font-weight: 700; }

.tsp-qke-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tsp-qke-tiles:empty { display: none; }
.tsp-qke-tiles-label { width: 100%; color: #6b7285; font-size: 12px; }
.tsp-qke-tile { padding: 4px 10px; border: 2px solid #d7defa; border-radius: 9px; background: #fff; font-weight: 700; }
.tsp-qke-tile.is-extra { border-style: dashed; color: #8a90a2; }

.tsp-qke-picture { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed #d4d9e6; border-radius: 12px; background: #fbfcfe; }
.tsp-qke-picture.is-required { border-style: solid; border-color: #ffd2b0; background: #fffaf5; }
.tsp-qke-picture-row { display: flex; gap: 12px; align-items: flex-start; }
.tsp-qke-picture-img { width: 140px; max-height: 110px; border-radius: 10px; object-fit: cover; }
.tsp-qke-picture-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.tsp-qke-picture-acts .tsp-b-input { width: 100%; }
.tsp-qke-picture-empty { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tsp-qke-picture-ai { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.tsp-qke-picture-ai .tsp-b-input { flex: 1; min-width: 0; }

.tsp-qke-stage { position: relative; max-width: 560px; border-radius: 12px; overflow: hidden; cursor: crosshair; box-shadow: 0 0 0 1px #d9deea; user-select: none; }
.tsp-qke-stage img { display: block; width: 100%; pointer-events: none; }
.tsp-qke-spot { position: absolute; display: grid; place-items: center; padding: 0; border: 3px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: grab; touch-action: none; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.tsp-qke-spot.is-right { background: rgba(47, 180, 87, 0.45); border-color: #2fb457; }
.tsp-qke-spot.is-trap { background: rgba(229, 72, 77, 0.4); border-color: #e5484d; }
.tsp-qke-spot.is-pin { width: 30px; height: 30px; background: #1d2135; }
.tsp-qke-spot.is-selected { box-shadow: 0 0 0 3px #4d96ff, 0 1px 6px rgba(0, 0, 0, 0.35); }
.tsp-qke-spot span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.tsp-qke-row > .tsp-qke-seg { flex: none; flex-wrap: nowrap; }
.tsp-qke-row > .tsp-qke-seg .tsp-qke-seg-btn { padding: 6px 10px; }
.tsp-qke-spots .tsp-qke-row > .tsp-b-input { min-width: 110px; }
.tsp-b-q-body > .tsp-qke-how { margin-bottom: 12px; }
.tsp-qke-size { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: #6b7285; }
.tsp-qke-size input { width: 80px; }
.tsp-qke-spots { display: flex; flex-direction: column; gap: 8px; }

.tsp-qke-slider-preview { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #f6f7fb; color: #4b5162; font-size: 13px; }
.tsp-qke-slider-preview input { flex: 1; }
.tsp-qke-slider-preview strong { color: #1d7a3b; }

.tsp-qke-puzzle { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); max-width: 280px; margin-top: 8px; border-radius: 10px; overflow: hidden; }
.tsp-qke-puzzle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tsp-qke-puzzle-cell { position: relative; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.9); }

.tsp-qke-flash { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tsp-qke-flash-side { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: #f8f9fc; }

.tsp-qke-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tsp-qke-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d9deea; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.tsp-qke-chip input { margin: 0; }
.tsp-qke-chip.is-on { border-color: #4d96ff; background: #eef5ff; color: #1d4f99; }

.tsp-qke-voices { padding: 10px 12px; border-radius: 12px; background: #f1f7ff; }
.tsp-qke-voices-head { display: flex; align-items: center; gap: 8px; color: #1d4f99; }
.tsp-qke-voices-status { color: #4b5162; font-size: 12px; font-weight: 700; }

@media (max-width: 700px) {
	.tsp-qke-grid3, .tsp-qke-flash, .tsp-qke-two { grid-template-columns: minmax(0, 1fr); }
	.tsp-qke-row { flex-wrap: wrap; }
}

/* ======================================================= 3. the grouped menu */

.tsp-f-menu.is-grouped { width: 760px; max-height: min(82vh, 720px); overflow-y: auto; }
.tsp-f-menu.is-grouped.is-shifted::after { display: none; }
/* 32 kinds: groups flow down three balanced columns. */
.tsp-f-menu-groups { column-count: 3; column-gap: 10px; }
.tsp-f-menu-group { display: flex; flex-direction: column; min-width: 0; break-inside: avoid; margin-bottom: 4px; }
.tsp-f-menu-group-title { padding: 8px 8px 2px; color: #8a90a2; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tsp-f-menu.is-grouped .tsp-f-menu-item { padding: 5px 6px; gap: 9px; }
.tsp-f-menu.is-grouped .tsp-f-menu-ico { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.tsp-f-menu.is-grouped .tsp-f-menu-text strong { font-size: 12.5px; }
.tsp-f-menu.is-grouped .tsp-f-menu-text span { overflow: hidden; font-size: 10.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 1100px) {
	.tsp-f-menu.is-grouped { width: min(560px, calc(100vw - 120px)); }
	.tsp-f-menu-groups { column-count: 2; }
}
@media (max-width: 860px) {
	.tsp-f-menu.is-grouped { width: min(560px, calc(100vw - 32px)); }
}
@media (max-width: 560px) {
	.tsp-f-menu-groups { column-count: 1; }
}


/* ============================================================== 4. second set (player) */

/* Sort into groups */
.tsp-qk-baskets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tsp-qk-basket { display: flex; flex-direction: column; min-height: 130px; border: 3px solid var(--c); border-radius: 20px; background: color-mix(in srgb, var(--c) 8%, #fff); overflow: hidden; }
.tsp-qk-basket-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 0; background: var(--c); color: #fff; font: inherit; font-size: 18px; font-weight: 900; cursor: pointer; }
.tsp-qk-basket-ico { font-size: 22px; }
.tsp-qk-basket-in { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; flex: 1; padding: 10px; }
.tsp-qk-baskets.is-waiting .tsp-qk-basket { border-style: dashed; animation: tsp-qk-pulse 1.2s infinite; }
.tsp-qk-chip.is-active { border-color: #4d96ff; background: #eef5ff; transform: scale(1.06); box-shadow: 0 0 0 4px rgba(77, 150, 255, 0.25); }

/* Pronunciation coach */
.tsp-qk-say { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 14px; font-size: 28px; font-weight: 900; line-height: 1.3; }
.tsp-qk-say-w { padding: 2px 10px; border-radius: 12px; background: #f3f5fc; transition: background 0.3s, color 0.3s; }
.tsp-qk-say-w.is-good { background: var(--tsp-good-bg); color: #1d7a3b; box-shadow: inset 0 -4px 0 var(--tsp-good); }
.tsp-qk-say-w.is-bad { background: var(--tsp-kind-bg); color: #8a5a00; box-shadow: inset 0 -4px 0 #e8b04d; }
.tsp-qk-pronounce .tsp-qk-checkrow { justify-content: center; }
.tsp-qk-mic.is-live { background: #e5484d; border-color: #b5292e; box-shadow: 0 5px 0 #b5292e; animation: tsp-qk-pulse 1.2s infinite; }
.tsp-qk-live { display: block; min-height: 24px; margin-top: 10px; color: var(--tsp-ink-soft); font-size: 18px; font-weight: 700; text-align: center; }

/* Role-play chat */
.tsp-qk-mission { margin-bottom: 10px; padding: 10px 14px; border-radius: 14px; background: #fff8e6; color: var(--tsp-ink); font-weight: 700; }
.tsp-qk-chat { display: flex; flex-direction: column; gap: 10px; max-height: 360px; min-height: 120px; overflow-y: auto; padding: 12px; border-radius: 18px; background: #f5f7fd; }
.tsp-qk-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; animation: tsp-qk-rise 0.3s ease-out; }
.tsp-qk-msg.is-k { align-self: flex-end; flex-direction: row-reverse; }
.tsp-qk-msg-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 2px 0 rgba(35, 48, 90, 0.08); font-size: 17px; border-left: 4px solid var(--c, #4d96ff); }
.tsp-qk-msg.is-k .tsp-qk-msg-body { border-radius: 18px 18px 4px 18px; border-left: 0; background: #4d96ff; color: #fff; }
.tsp-qk-msg-body strong { font-size: 12px; opacity: 0.75; }
.tsp-qk-msg.is-thinking .tsp-qk-msg-body { color: var(--tsp-ink-soft); font-style: italic; animation: tsp-qk-blink 1s infinite alternate; }
@keyframes tsp-qk-blink { from { opacity: 0.5; } to { opacity: 1; } }
.tsp-qk-ava { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; font-size: 26px; object-fit: cover; box-shadow: 0 2px 6px rgba(35, 48, 90, 0.15); }
.tsp-qk-chat-controls { margin-top: 12px; }
.tsp-qk-chat-type { display: flex; gap: 8px; }
.tsp-qk-chat-type .tsp-input { flex: 1; }
.tsp-qk-chat-mic { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Dictation */
.tsp-qk-dictation .tsp-qk-checkrow:first-child { justify-content: center; margin: 0 0 12px; }
.tsp-qk-dictate { font-size: 20px; }
.tsp-qk-typed { margin: 10px 0 0; font-size: 19px; line-height: 1.8; }
.tsp-qk-typed-w { padding: 2px 6px; border-radius: 8px; }
.tsp-qk-typed-w.is-good { background: var(--tsp-good-bg); color: #1d7a3b; }
.tsp-qk-typed-w.is-half { background: #fff4d6; color: #8a5a00; text-decoration: underline wavy #e8b04d; }
.tsp-qk-typed-w.is-bad { background: #ffe9e2; color: #a33030; text-decoration: line-through; }

/* Cards: what happens next, sound hunt, faces, characters */
.tsp-qk-card.is-story { min-height: 90px; font-size: 18px; text-align: left; }
.tsp-qk-sound { display: flex; align-items: center; gap: 12px; margin: 0 auto 12px; padding: 12px 26px; border: 0; border-radius: 999px; background: #a15cf0; color: #fff; font: inherit; font-size: 30px; cursor: pointer; box-shadow: 0 5px 0 #7d3fce; }
.tsp-qk-sound strong { font-size: 34px; letter-spacing: 0.04em; }
.tsp-qk-soundhunt { text-align: center; }
.tsp-qk-card.is-face { min-height: 110px; }
.tsp-qk-face-emoji { font-size: 54px; line-height: 1; }
.tsp-qk-card.is-person { border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.tsp-qk-card.is-person .tsp-qk-ava { width: 64px; height: 64px; font-size: 40px; }

/* Memory pairs */
.tsp-qk-memwrap { text-align: center; }
.tsp-qk-memory { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; }
.tsp-qk-mcard { aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; perspective: 800px; }
.tsp-qk-mcard-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s; }
.tsp-qk-mcard.is-open .tsp-qk-mcard-in, .tsp-qk-mcard.is-matched .tsp-qk-mcard-in { transform: rotateY(180deg); }
.tsp-qk-mcard-back, .tsp-qk-mcard-front { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-weight: 900; }
.tsp-qk-mcard-back { background: linear-gradient(135deg, #ff9f43, #ff7a59); color: #fff; font-size: 34px; box-shadow: 0 4px 0 #e05a38; }
.tsp-qk-mcard-front { transform: rotateY(180deg); border: 3px solid var(--qk-line, #d7defa); background: #fff; color: var(--tsp-ink); font-size: 17px; overflow-wrap: anywhere; }
.tsp-qk-mcard-front .tsp-qk-img { max-width: 80%; }
.tsp-qk-mcard.is-matched .tsp-qk-mcard-front { border-color: var(--tsp-good); background: var(--tsp-good-bg); }

/* Word search */
.tsp-qk-ws-cols { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; align-items: start; }
.tsp-qk-ws { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; max-width: 520px; padding: 6px; border-radius: 16px; background: #eef2fb; user-select: none; }
.tsp-qk-ws-cell { aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: #fff; color: var(--tsp-ink); font: inherit; font-size: clamp(13px, 2.4vw, 20px); font-weight: 900; text-transform: uppercase; cursor: pointer; }
.tsp-qk-ws-cell.is-start { background: #4d96ff; color: #fff; transform: scale(1.1); }
.tsp-qk-ws-cell.is-miss { background: #ffe0d6; }
.tsp-qk-ws-cell.is-found { color: #fff; }
.tsp-qk-ws-cell.is-c0 { background: #4d96ff; } .tsp-qk-ws-cell.is-c1 { background: #a15cf0; } .tsp-qk-ws-cell.is-c2 { background: #f07c1a; }
.tsp-qk-ws-cell.is-c3 { background: #1aa6a6; } .tsp-qk-ws-cell.is-c4 { background: #e0468a; } .tsp-qk-ws-cell.is-c5 { background: #6b8e23; }
.tsp-qk-ws-cell.is-reveal { box-shadow: inset 0 0 0 3px var(--tsp-good); }
.tsp-qk-ws-list { margin: 8px 0 0; padding: 0; list-style: none; }
.tsp-qk-ws-list li { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 17px; font-weight: 800; }
.tsp-qk-ws-tick { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--qk-line, #d7defa); border-radius: 6px; color: transparent; font-size: 13px; }
.tsp-qk-ws-list li.is-found { color: var(--tsp-ink-soft); text-decoration: line-through; }
.tsp-qk-ws-list li.is-found .tsp-qk-ws-tick { border-color: var(--tsp-good); background: var(--tsp-good); color: #fff; }

/* Crossword */
.tsp-qk-cw-cols { display: grid; grid-template-columns: minmax(0, auto) minmax(200px, 1fr); gap: 18px; align-items: start; }
.tsp-qk-cw { display: grid; grid-template-columns: repeat(var(--cols), minmax(28px, 40px)); gap: 2px; }
.tsp-qk-cw-block { aspect-ratio: 1; }
.tsp-qk-cw-cell { position: relative; aspect-ratio: 1; border: 2px solid #23305a; border-radius: 6px; background: #fff; }
.tsp-qk-cw-cell.is-active { background: #eef5ff; border-color: #4d96ff; }
.tsp-qk-cw-cell.is-good { background: var(--tsp-good-bg); border-color: var(--tsp-good); }
.tsp-qk-cw-cell.is-bad { background: #fff4d6; border-color: #e8b04d; }
.tsp-qk-cw-n { position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 900; color: var(--tsp-ink-soft); }
.tsp-qk-cw-in { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--tsp-ink); font: inherit; font-size: 20px; font-weight: 900; text-align: center; text-transform: uppercase; }
.tsp-qk-cw-in:focus { outline: 3px solid #4d96ff; outline-offset: -2px; border-radius: 4px; }
.tsp-qk-cw-clues h4 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tsp-ink-soft); }
.tsp-qk-cw-clues ol { margin: 0 0 12px; padding-left: 0; list-style: none; }
.tsp-qk-cw-clues li { margin-bottom: 4px; padding: 6px 8px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.tsp-qk-cw-clues li.is-active { background: #eef5ff; }
.tsp-qk-hear.is-inline { position: static; display: inline-grid; width: 26px; height: 26px; margin-left: 4px; vertical-align: middle; }

/* Fix the mistake, tap the word */
.tsp-qk-sentence-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 14px; }
.tsp-qk-word { padding: 8px 12px; border: 3px solid var(--qk-line, #d7defa); border-radius: 14px; background: #fff; color: var(--tsp-ink); font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--qk-line, #d7defa); }
.tsp-qk-word:hover:not(:disabled) { border-color: var(--tsp-accent); }
.tsp-qk-word.is-active { border-color: #4d96ff; background: #eef5ff; }
.tsp-qk-word.is-good { border-color: var(--tsp-good); background: var(--tsp-good-bg); }
.tsp-qk-word.is-bad { border-color: #e8b04d; background: var(--tsp-kind-bg); }
.tsp-qk-word.is-reveal { border-color: var(--tsp-good); border-style: dashed; }
.tsp-qk-fixto { color: #1d7a3b; }
.tsp-qk-fix { text-align: center; }
.tsp-qk-fix .tsp-qk-pool { margin-bottom: 8px; }

/* Picture description */
.tsp-qk-use { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.tsp-qk-use .tsp-qk-hint { margin: 0 4px 0 0; }
.tsp-qk-use-w { padding: 4px 12px; border: 2px dashed #c3cdf0; border-radius: 999px; font-weight: 800; }
.tsp-qk-use-w.is-used { border-style: solid; border-color: var(--tsp-good); background: var(--tsp-good-bg); color: #1d7a3b; }
.tsp-qk-use-w.is-used::before { content: "✓ "; }

/* Sequence the dialogue */
.tsp-qk-dialogue .tsp-qk-tile { align-items: center; gap: 10px; }
.tsp-qk-dialogue .tsp-qk-ava { width: 36px; height: 36px; font-size: 22px; }
.tsp-qk-bubble { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--c) 12%, #fff); text-align: left; }
.tsp-qk-bubble strong { font-size: 11px; color: var(--c); }

@media (max-width: 640px) {
	.tsp-qk-ws-cols, .tsp-qk-cw-cols { grid-template-columns: minmax(0, 1fr); }
	.tsp-qk-say { font-size: 22px; }
	.tsp-qk-cw { grid-template-columns: repeat(var(--cols), minmax(22px, 32px)); }
	.tsp-qk-cw-in { font-size: 16px; }
}
.tsp-still .tsp-qk-mcard-in { transition: none; }
.tsp-still .tsp-qk-mic.is-live, .tsp-still .tsp-qk-baskets.is-waiting .tsp-qk-basket { animation: none; }

/* ============================================================== 5. second set (editor) */

.tsp-qke-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.tsp-qke-face { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 6px 8px; border: 1px solid #d9deea; border-radius: 12px; background: #fff; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.tsp-qke-face.is-on { border-color: #1d2135; background: #1d2135; color: #fff; }
.tsp-qke-face-emoji { font-size: 24px; }
.tsp-qke-picker .tsp-qke-tile { cursor: pointer; font: inherit; font-weight: 700; }
.tsp-qke-picker .tsp-qke-tile.is-picked { border-color: #e5484d; background: #fff1f1; color: #a33030; }
.tsp-qke-turn-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.tsp-qke-expect { font-size: 12px !important; }
.tsp-qke-who { flex: none; width: 150px; }
.tsp-qke-who select, .tsp-qke-goto, .tsp-qke-group-select { max-width: 160px; }
.tsp-qke-next .tsp-b-input:not(select) { flex: 1; min-width: 0; }

/* Fill in the blank (fillgap) */
.tsp-qk-gaprow { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin: 8px 0 14px; }
.tsp-qk-gapline { margin: 0; font-size: 1.35em; line-height: 2.3; text-align: center; color: var(--tsp-ink); }
.tsp-qk-slot { display: inline-block; min-width: 5.5em; padding: 2px 12px; border: 0; border-bottom: 4px solid var(--qk-line, #d7defa); border-radius: 10px 10px 0 0; background: #f4f7ff; color: var(--tsp-ink); font: inherit; font-weight: 700; text-align: center; vertical-align: baseline; }
button.tsp-qk-slot { cursor: pointer; min-height: 1.6em; }
input.tsp-qk-slot { width: 7em; outline-offset: 2px; }
.tsp-qk-slot.is-active { border-bottom-color: #4d96ff; background: #eef5ff; }
.tsp-qk-slot.is-good { border-bottom-color: var(--tsp-good); background: var(--tsp-good-bg); }
.tsp-qk-slot.is-bad { border-bottom-color: #e8b04d; background: var(--tsp-kind-bg); }
.tsp-qk-slot.is-reveal { border-bottom-style: dashed; border-bottom-color: var(--tsp-good); }
.tsp-qk-gap-opts { justify-content: center; margin-bottom: 10px; }
.tsp-qk-gap-opts[hidden] { display: none; }
.tsp-qk-gapwrap .tsp-qk-checkrow { justify-content: center; }
.tsp-qke-gapprev { margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; background: #f4f7ff; font-size: 16px; font-weight: 700; }


/* Complete the word (completeword): the word with a gap, and the letters that fit */
.tsp-qk-cw-word { margin: 6px 0 14px; font-size: 2.4em; font-weight: 800; letter-spacing: .06em; text-align: center; color: var(--tsp-ink); }
.tsp-qk-cw-slot { display: inline-block; min-width: 1.6em; margin: 0 .08em; padding: 0 .15em; border-bottom: 4px solid var(--qk-line, #d7defa); border-radius: 10px 10px 0 0; background: #f4f7ff; color: var(--tsp-ink-soft); }
.tsp-qk-cw-slot.is-good { border-bottom-color: var(--tsp-good); background: var(--tsp-good-bg); color: var(--tsp-ink); }
.tsp-qk-cw-slot.is-reveal { border-bottom-style: dashed; border-bottom-color: var(--tsp-good); color: var(--tsp-ink); }
.tsp-qk-cw .tsp-qk-pool { justify-content: center; }
.tsp-qk-cw .tsp-qk-tile { min-width: 72px; font-size: 26px; font-weight: 800; }
.tsp-qk-cw .tsp-qk-tile.is-reveal { border-color: var(--tsp-good); border-style: dashed; }
.tsp-qk-cw-preview .tsp-qk-cw-word { margin: 4px 0 10px; font-size: 1.6em; text-align: left; }

/* Sequence the dialogue: numbered places, lines dragged or tapped in, checked one by one (question-kinds-plus.js) */
.tsp-qk-dlg { display: flex; flex-direction: column; gap: 14px; }
.tsp-qk-dslots { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tsp-qk-dslot { display: flex; align-items: stretch; gap: 10px; }
.tsp-qk-dnum { flex: none; display: grid; place-items: center; width: 34px; border-radius: 12px; background: #eef2ff; color: #4f5fa8; font-size: 16px; font-weight: 900; }
.tsp-qk-dslot.is-filled .tsp-qk-dnum { background: var(--qk-good-bg, #e6f9ec); color: var(--qk-good, #2fb457); }
.tsp-qk-dfill { flex: 1; display: flex; align-items: center; min-height: 56px; padding: 4px; border: 3px dashed #c3cdf0; border-radius: 16px; background: rgba(255, 255, 255, .6); transition: border-color .15s, background .15s, transform .15s; }
.tsp-qk-dslot.is-filled .tsp-qk-dfill { border-style: solid; border-color: transparent; background: transparent; padding: 0; }
.tsp-qk-dslot.is-over .tsp-qk-dfill { border-color: var(--qk-accent, #ff7a59); background: color-mix(in srgb, var(--qk-accent, #ff7a59) 10%, #fff); transform: scale(1.01); }
.tsp-qk-dtile { flex-direction: row; justify-content: flex-start; width: 100%; gap: 10px; font-size: 17px; text-align: left; cursor: default; animation: tsp-qk-pop .3s ease-out; }
.tsp-qk-dtile.is-hint::before { content: "💡"; position: absolute; top: -10px; right: -6px; font-size: 18px; }
.tsp-qk-dtile.is-speaking { border-color: var(--qk-accent, #ff7a59) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--qk-accent, #ff7a59) 25%, transparent), 0 4px 0 #a6e3ba; transform: scale(1.015); }
.tsp-qk-dpool { align-items: stretch; }
.tsp-qk-dcard { flex-direction: row; justify-content: flex-start; gap: 10px; font-size: 17px; text-align: left; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.tsp-qk-dcard:active { cursor: grabbing; }
.tsp-qk-dcard.is-lifted { opacity: .35; }
.tsp-qk-dcard.is-testing { animation: tsp-qk-testing .7s ease-in-out infinite; }
.tsp-qk-dcard.is-shake, .tsp-qk-dslot.is-shake .tsp-qk-dfill { animation: tsp-qk-shake .45s ease; border-color: var(--qk-bad, #e5a52e); }
.tsp-qk-dslot.is-shake .tsp-qk-dnum { animation: tsp-qk-shake .45s ease; background: var(--qk-bad-bg, #fff4d6); }
.tsp-qk-ghost { position: fixed; z-index: 2147483000; margin: 0; pointer-events: none; opacity: .96; box-shadow: 0 18px 34px rgba(35, 48, 90, .3) !important; animation: none !important; will-change: transform; }
.tsp-qk-dmsg { min-height: 1.4em; color: var(--tsp-ink-soft); font-weight: 700; text-align: center; }
.tsp-qk-dplay { align-self: center; }
@keyframes tsp-qk-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
@keyframes tsp-qk-testing { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .tsp-qk-dcard.is-shake, .tsp-qk-dslot.is-shake .tsp-qk-dfill, .tsp-qk-dslot.is-shake .tsp-qk-dnum, .tsp-qk-dcard.is-testing { animation: none; } }
/* The dragged copy lives outside the question, so it brings its own colours. */
.tsp-qk-ghost { --qk-line: #d7defa; --qk-accent: #ff7a59; --qk-good: #2fb457; --qk-good-bg: #e6f9ec; background: #fff; color: #23305a; font-family: inherit; }

/* ------------------------------------------------------------------ Games (question-games.js): every game of the Games tool */
.tsp-g { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.tsp-g-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.tsp-g-prompt { margin: 0; font-size: 1.25em; font-weight: 800; text-align: center; color: var(--tsp-ink); }
.tsp-g-prompt.is-word { font-size: 2.2em; letter-spacing: .06em; }
.tsp-g-label { padding: 2px 12px; border-radius: 999px; background: var(--tsp-kind-bg, #fff3dc); color: var(--tsp-ink); font-weight: 800; text-transform: uppercase; font-size: .8em; letter-spacing: .05em; }
.tsp-g-hint { margin: 0; text-align: center; color: var(--tsp-ink-soft); font-weight: 700; }
.tsp-g-pic { max-width: min(100%, 320px); max-height: 200px; border-radius: 14px; object-fit: contain; }
.tsp-g-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.tsp-g-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 12px; border: 3px solid var(--qk-line, #d7defa); border-radius: 16px; background: #fff; color: var(--tsp-ink); font: inherit; font-size: 1.15em; font-weight: 700; cursor: pointer; box-shadow: 0 4px 0 var(--qk-line, #d7defa); transition: transform .12s, border-color .12s; }
.tsp-g-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--qk-accent, #6a5cff); }
.tsp-g-card:disabled { cursor: default; }
.tsp-g-card .tsp-qk-img { max-width: 100%; max-height: 110px; border-radius: 10px; }
.tsp-g-card.is-good, .tsp-g-cell.is-good, .tsp-g-key.is-good, .tsp-g-tile.is-used { border-color: var(--tsp-good); background: var(--tsp-good-bg); box-shadow: 0 4px 0 #a6e3ba; }
.tsp-g-card.is-bad, .tsp-g-key.is-bad, .tsp-g-tile.is-bad { border-color: #e8b04d; background: var(--tsp-kind-bg, #fff3dc); box-shadow: 0 4px 0 #f1d79b; }
.tsp-g-card.is-picked { border-color: var(--qk-accent, #6a5cff); background: #eef2ff; }
.is-shake { animation: tsp-g-shake .4s; }
@keyframes tsp-g-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.tsp-g-big { font-size: 3em; line-height: 1; }
.tsp-g-done { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; animation: tsp-qk-pop .4s ease-out; }

/* rounds: the trail (car / pawn / ladder), clues and the clock */
.tsp-g-trail { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tsp-g-track { position: relative; width: 100%; height: 34px; border-bottom: 4px dashed var(--qk-line, #d7defa); }
.tsp-g-pawn { position: absolute; bottom: -6px; font-size: 26px; transform: translateX(-10%); transition: left .6s ease; }
.tsp-g-goal { position: absolute; right: 0; bottom: -4px; font-size: 26px; }
.tsp-g-rung { display: block; min-width: 120px; margin: 2px auto; padding: 4px 14px; border-radius: 10px; background: var(--tsp-good-bg); border: 2px solid var(--tsp-good); text-align: center; font-weight: 800; animation: tsp-qk-pop .3s ease-out; }
.tsp-g-clues { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tsp-g-clue { padding: 8px 14px; border-radius: 12px; background: #f4f7ff; font-weight: 700; }
.tsp-g-clue.is-new { animation: tsp-qk-pop .35s ease-out; background: var(--tsp-kind-bg, #fff3dc); }
.tsp-g-nextclue { align-self: center; }
.tsp-g-clock { height: 10px; border-radius: 6px; background: #e8ecfb; overflow: hidden; }
.tsp-g-clock-in { display: block; height: 100%; background: var(--qk-accent, #6a5cff); transition: width .25s linear; }

/* tiles and letter rain */
.tsp-g-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tsp-g-slot { display: grid; place-items: center; min-width: 44px; min-height: 52px; padding: 0 8px; border-bottom: 4px solid var(--qk-line, #d7defa); border-radius: 10px 10px 0 0; background: #f4f7ff; font-size: 1.6em; font-weight: 800; }
.tsp-g-slot.is-good { border-bottom-color: var(--tsp-good); background: var(--tsp-good-bg); }
.tsp-g-slots.is-words .tsp-g-slot { min-width: 70px; font-size: 1.1em; }
.tsp-g-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tsp-g-tile { min-width: 50px; min-height: 50px; padding: 6px 14px; border: 3px solid var(--qk-line, #d7defa); border-radius: 14px; background: #fff; color: var(--tsp-ink); font: inherit; font-size: 1.4em; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--qk-line, #d7defa); }
.tsp-g-tile:disabled { opacity: .45; cursor: default; }
.tsp-g-pool.is-rain { position: relative; display: block; height: 240px; overflow: hidden; border-radius: 16px; background: linear-gradient(#e9f3ff, #fff); }
.tsp-g-pool.is-rain .tsp-g-tile { position: absolute; top: -60px; animation: tsp-g-fall 6s linear infinite; }
.tsp-g-pool.is-rain.is-slow .tsp-g-tile { animation-duration: 9s; }
.tsp-g-pool.is-rain.is-fast .tsp-g-tile { animation-duration: 4s; }
.tsp-g-pool.is-rain .tsp-g-tile:disabled { display: none; }
@keyframes tsp-g-fall { from { top: -60px; } to { top: 250px; } }
.tsp-g-type { text-align: center; font-size: 1.5em; letter-spacing: .08em; }
.tsp-g-type.is-bad { border-color: #e8b04d; }
.tsp-g-type.is-good { border-color: var(--tsp-good); background: var(--tsp-good-bg); }

/* hangman friends */
.tsp-g-friend { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tsp-g-bear { font-size: 3em; }
.tsp-g-balloons { font-size: 1.6em; letter-spacing: 2px; }
.tsp-g-note { margin: 4px 0 0; font-weight: 800; }
.tsp-g-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tsp-g-letter { display: grid; place-items: center; width: 40px; height: 48px; border-bottom: 4px solid var(--qk-line, #d7defa); font-size: 1.7em; font-weight: 800; text-transform: uppercase; }
.tsp-g-letter.is-on { border-bottom-color: var(--tsp-good); animation: tsp-qk-pop .3s ease-out; }
.tsp-g-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tsp-g-key { min-width: 38px; min-height: 40px; border: 2px solid var(--qk-line, #d7defa); border-radius: 10px; background: #fff; color: var(--tsp-ink); font: inherit; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.tsp-g-key:disabled { cursor: default; opacity: .6; }

/* bubble pop */
.tsp-g-sea { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 14px; min-height: 180px; border-radius: 18px; background: linear-gradient(#dff3ff, #f4fbff); }
.tsp-g-bubble { width: 78px; height: 78px; border: 3px solid #8ccaf0; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #bfe6fb); color: #14507a; font: inherit; font-size: 1.6em; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.tsp-g-sea.is-moving .tsp-g-bubble { animation: tsp-g-bob 3.2s ease-in-out infinite; }
@keyframes tsp-g-bob { 50% { transform: translateY(-14px); } }
.tsp-g-bubble.is-popped { animation: tsp-g-pop .35s forwards; pointer-events: none; }
@keyframes tsp-g-pop { to { transform: scale(1.6); opacity: 0; } }

/* word bingo */
.tsp-g-caller { display: flex; align-items: center; justify-content: center; gap: 12px; }
.tsp-g-bigcall { font-size: 2em; }
.tsp-g-bingocard { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 8px; }
.tsp-g-cell { position: relative; display: grid; place-items: center; min-height: 72px; padding: 6px; border: 3px solid var(--qk-line, #d7defa); border-radius: 14px; background: #fff; color: var(--tsp-ink); font: inherit; font-size: 1.1em; font-weight: 800; cursor: pointer; }
.tsp-g-cell .tsp-qk-img { max-height: 80px; max-width: 100%; }
.tsp-g-stamp { position: absolute; top: 2px; right: 6px; color: var(--tsp-good); font-size: 1.4em; }

/* category basket, grocery */
.tsp-g-throw { min-height: 110px; display: flex; justify-content: center; align-items: center; }
.tsp-g-flying { animation: tsp-qk-pop .3s ease-out; min-width: 140px; }
.tsp-g-flying.is-in { animation: tsp-g-toss .45s forwards; }
@keyframes tsp-g-toss { to { transform: translateY(80px) scale(.3); opacity: 0; } }
.tsp-g-baskets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tsp-g-bin { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; padding: 10px 16px; border: 3px solid #c9a35e; border-radius: 16px; background: #fff3dc; color: var(--tsp-ink); font: inherit; font-weight: 800; cursor: pointer; }
.tsp-g-bin-1 { border-color: #7aa8e8; background: #eaf2ff; }
.tsp-g-bin-2 { border-color: #7cc79a; background: #e6f7ee; }
.tsp-g-customer { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tsp-g-say { margin: 0; padding: 8px 14px; border-radius: 16px; background: #fff; border: 2px solid var(--qk-line, #d7defa); font-weight: 700; }
.tsp-g-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tsp-g-product { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 3px solid var(--qk-line, #d7defa); border-radius: 14px; background: #fff; font-weight: 700; }
.tsp-g-product .tsp-qk-img { max-height: 70px; }
.tsp-g-price { padding: 1px 10px; border-radius: 999px; background: #fff3dc; font-weight: 800; }
.tsp-g-qtyrow { display: flex; align-items: center; gap: 8px; }
.tsp-g-qty { width: 34px; height: 34px; border: 2px solid var(--qk-line, #d7defa); border-radius: 50%; background: #fff; font: inherit; font-size: 1.2em; font-weight: 800; cursor: pointer; }
.tsp-g-count { min-width: 1.4em; text-align: center; font-weight: 800; }
.tsp-g-basketbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: #f4f7ff; }
.tsp-g-in { padding: 2px 10px; border-radius: 999px; background: #fff; font-weight: 700; }

/* syllable clap */
.tsp-g-syllable { align-items: center; }
.tsp-g-drum { width: 150px; height: 150px; border: 6px solid #c9a35e; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3dc, #f2c97e); font-size: 4em; cursor: pointer; }
.tsp-g-drum.is-hit { animation: tsp-g-hit .25s; }
@keyframes tsp-g-hit { 40% { transform: scale(.9); } }
.tsp-g-dots { display: flex; gap: 8px; min-height: 22px; }
.tsp-g-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--qk-accent, #6a5cff); animation: tsp-qk-pop .25s ease-out; }
.tsp-g-claps { font-weight: 800; }

/* say each: echo parrot and star collector */
.tsp-g-stars { text-align: center; font-weight: 800; font-size: 1.1em; }
.tsp-g-parrot { text-align: center; font-size: 3em; }
.tsp-g-line { text-align: center; }
.tsp-g-sayeach .is-star .tsp-g-parrot { animation: tsp-g-hit .6s; }

/* pairs */
.tsp-g-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tsp-g-col { display: flex; flex-direction: column; gap: 8px; }

/* the editor side */
.tsp-g-edround-in { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.tsp-qke-correct { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.tsp-qke-num { width: 5.5em; }
.tsp-qke-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
	.tsp-g-pool.is-rain .tsp-g-tile, .tsp-g-sea.is-moving .tsp-g-bubble { animation: none; }
}

.tsp-g-calltext { font-size: 1.5em; }