/*
 * Story Studio Plush - story tools on the learner's stage (scene-fx.js): character actions, camera,
 * weather / magic canvas, mood filters, look here!, tap to explore, story choice, celebrate.
 * Positions use `translate` (not `transform`) so GSAP can scale / move the same elements freely.
 */

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

.tsp-fx-rig { position: relative; transform-origin: 50% 100%; }
.tsp-char.tsp-fx-gone { visibility: hidden; }
.tsp-fx-hand {
	position: absolute;
	top: -0.6em;
	right: -0.2em;
	font-size: 3.4em;
	line-height: 1;
	z-index: 2;
	filter: drop-shadow(0 0.08em 0.1em rgba(0, 0, 0, 0.3));
	pointer-events: none;
}

/* ---------------------------------------------------------------- layers */

.tsp-fx-mood, .tsp-fx-cam, .tsp-fx-explore { position: absolute; inset: 0; pointer-events: none; }
.tsp-fx-mood { z-index: 4; }
.tsp-fx-cam { z-index: 6; }
.tsp-fx-explore { z-index: 7; }
.tsp-fx-canvas { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tsp-fx-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.tsp-fx-top { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; place-items: center; }

/* ----------------------------------------------------------------- moods */

.tsp-camera { transition: filter 0.9s ease; }
.tsp-fx-mood { opacity: 0; transition: opacity 0.9s ease; }
.tsp-camera.tsp-fx-instant, .tsp-camera.tsp-fx-instant > .tsp-fx-mood { transition: none; }
.tsp-camera[data-fx-mood] > .tsp-fx-mood { opacity: 1; }

.tsp-camera[data-fx-mood="night"] { filter: brightness(0.66) saturate(0.72) contrast(1.05); }
.tsp-camera[data-fx-mood="night"].tsp-fx-strong { filter: brightness(0.5) saturate(0.6) contrast(1.1); }
.tsp-camera[data-fx-mood="night"] > .tsp-fx-mood { background: radial-gradient(ellipse at 50% 35%, rgba(70, 90, 190, 0.18), rgba(10, 16, 60, 0.55) 80%); mix-blend-mode: multiply; }

.tsp-camera[data-fx-mood="sunset"] { filter: saturate(1.25) sepia(0.2) hue-rotate(-10deg); }
.tsp-camera[data-fx-mood="sunset"].tsp-fx-strong { filter: saturate(1.4) sepia(0.35) hue-rotate(-16deg) brightness(0.95); }
.tsp-camera[data-fx-mood="sunset"] > .tsp-fx-mood { background: linear-gradient(180deg, rgba(255, 120, 60, 0.45), rgba(255, 190, 90, 0.22) 55%, rgba(120, 40, 90, 0.3)); mix-blend-mode: soft-light; }

.tsp-camera[data-fx-mood="flashback"] { filter: sepia(0.7) saturate(0.85) contrast(0.95); }
.tsp-camera[data-fx-mood="flashback"].tsp-fx-strong { filter: sepia(1) grayscale(0.25) contrast(0.92); }
.tsp-camera[data-fx-mood="flashback"] > .tsp-fx-mood { background: radial-gradient(ellipse at center, transparent 55%, rgba(70, 40, 10, 0.55)); }

.tsp-camera[data-fx-mood="dream"] { filter: saturate(1.15) brightness(1.06) blur(0.5px); }
.tsp-camera[data-fx-mood="dream"].tsp-fx-strong { filter: saturate(1.2) brightness(1.1) blur(1.2px); }
.tsp-camera[data-fx-mood="dream"] > .tsp-fx-mood { background: radial-gradient(ellipse at center, rgba(255, 220, 250, 0.1) 40%, rgba(255, 255, 255, 0.75) 100%), linear-gradient(135deg, rgba(200, 160, 255, 0.25), rgba(255, 190, 230, 0.25)); }

.tsp-camera[data-fx-mood="underwater"] { filter: hue-rotate(12deg) saturate(1.1) brightness(0.93); }
.tsp-camera[data-fx-mood="underwater"].tsp-fx-strong { filter: hue-rotate(20deg) saturate(1.2) brightness(0.85); }
.tsp-camera[data-fx-mood="underwater"] > .tsp-fx-mood { background: linear-gradient(180deg, rgba(40, 170, 220, 0.35), rgba(0, 60, 130, 0.5)); mix-blend-mode: multiply; }
.tsp-camera[data-fx-mood="underwater"] > .tsp-fx-mood::before {
	content: '';
	position: absolute;
	inset: -20% -10%;
	background: repeating-linear-gradient(105deg, rgba(255, 255, 255, 0) 0 6%, rgba(210, 250, 255, 0.28) 7% 9%, rgba(255, 255, 255, 0) 10% 16%);
	mix-blend-mode: screen;
	animation: tsp-fx-rays 7s ease-in-out infinite alternate;
}
@keyframes tsp-fx-rays { from { transform: translateX(-4%) skewX(-4deg); } to { transform: translateX(4%) skewX(4deg); } }

.tsp-camera[data-fx-mood="spooky"] { filter: saturate(0.55) brightness(0.72) contrast(1.15); }
.tsp-camera[data-fx-mood="spooky"].tsp-fx-strong { filter: saturate(0.4) brightness(0.58) contrast(1.25); }
.tsp-camera[data-fx-mood="spooky"] > .tsp-fx-mood { background: radial-gradient(ellipse at 50% 40%, rgba(120, 255, 170, 0.12), rgba(50, 10, 80, 0.6) 85%); mix-blend-mode: multiply; }

.tsp-camera[data-fx-mood="cold"] { filter: saturate(0.7) brightness(1.05) hue-rotate(8deg); }
.tsp-camera[data-fx-mood="cold"].tsp-fx-strong { filter: saturate(0.5) brightness(1.1) hue-rotate(14deg); }
.tsp-camera[data-fx-mood="cold"] > .tsp-fx-mood { background: linear-gradient(180deg, rgba(190, 230, 255, 0.45), rgba(230, 245, 255, 0.25)); mix-blend-mode: screen; }

.tsp-camera[data-fx-mood="sunny"] { filter: saturate(1.28) brightness(1.07) contrast(1.03); }
.tsp-camera[data-fx-mood="sunny"].tsp-fx-strong { filter: saturate(1.45) brightness(1.12) contrast(1.05); }
.tsp-camera[data-fx-mood="sunny"] > .tsp-fx-mood { background: radial-gradient(circle at 88% 6%, rgba(255, 240, 160, 0.85), rgba(255, 220, 120, 0.25) 30%, transparent 60%); mix-blend-mode: screen; }

.tsp-still .tsp-camera, .tsp-still .tsp-fx-mood { transition: none; }
.tsp-still .tsp-fx-mood::before { animation: none !important; }

/* ------------------------------------------------------------ look here! */

.tsp-fx-look { position: absolute; inset: 0; pointer-events: none; }
.tsp-fx-spotlight {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--x) var(--y), transparent var(--r), rgba(8, 12, 35, 0.64) calc(var(--r) * 1.35));
}
.tsp-fx-ring {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: calc(var(--r) * 2);
	aspect-ratio: 1;
	translate: -50% -50%;
	border: 0.55em solid #ffd23f;
	border-radius: 50%;
	box-shadow: 0 0 0 0.28em rgba(255, 255, 255, 0.85), 0 0 1.6em 0.5em rgba(255, 210, 63, 0.7), inset 0 0 1em rgba(255, 210, 63, 0.5);
}
.tsp-fx-arrow {
	position: absolute;
	left: var(--x);
	top: calc(var(--y) - var(--r));
	width: 7cqw;
	translate: -50% -100%;
	filter: drop-shadow(0 0.3em 0.4em rgba(0, 0, 0, 0.35));
}
.tsp-fx-arrow.is-up { top: calc(var(--y) + var(--r)); translate: -50% 0; }
.tsp-fx-arrow.is-up svg { transform: rotate(180deg); }
.tsp-fx-arrow svg { display: block; width: 100%; height: auto; }
.tsp-fx-twinkle {
	position: absolute;
	left: calc(var(--x) + var(--dx, 0px));
	top: calc(var(--y) + var(--dy, 0px));
	translate: -50% -50%;
	font-size: 2.6cqw;
	line-height: 1;
	filter: drop-shadow(0 0 0.3em rgba(255, 240, 150, 0.9));
}
.tsp-fx-look-label {
	position: absolute;
	left: var(--x);
	top: calc(var(--y) + var(--r) + 1.2cqw);
	translate: -50% 0;
	max-width: 40cqw;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: #fff;
	color: #23305a;
	font-weight: 800;
	font-size: 1.35em;
	box-shadow: 0 0.3em 0.9em rgba(0, 0, 0, 0.25);
	text-align: center;
}
.tsp-fx-look-label.is-above { top: auto; bottom: calc(100% - var(--y) + var(--r) + 1.2cqw); }
.tsp-fx-look-spotlight .tsp-fx-look-label { background: #ffd23f; }

/* --------------------------------------------------------- tap to explore */

.tsp-fx-explore-spots { position: absolute; inset: 0; }
.tsp-fx-spot {
	position: absolute;
	width: calc(var(--r) * 2);
	aspect-ratio: 1;
	translate: -50% -50%;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
.tsp-fx-spot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
}
.tsp-fx-spot.has-hint::before {
	border: 0.3em dashed rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 0.2em rgba(77, 150, 255, 0.55), 0 0 1.2em rgba(255, 255, 255, 0.6);
	animation: tsp-fx-pulse 1.6s ease-in-out infinite;
}
.tsp-fx-spot.is-found::before {
	border: 0.3em solid #6bcb77;
	box-shadow: 0 0 0 0.2em rgba(255, 255, 255, 0.9), 0 0 1.2em rgba(107, 203, 119, 0.8);
	animation: none;
}
.tsp-fx-spot:focus-visible { outline: 0.25em solid #ffd23f; outline-offset: 0.25em; }
@keyframes tsp-fx-pulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.1); opacity: 0.55; } }
.tsp-fx-sticker {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: calc(var(--r) * 1.15);
	line-height: 1;
	opacity: 0;
	filter: drop-shadow(0 0.08em 0.12em rgba(0, 0, 0, 0.35));
	transition: opacity 0.25s;
	pointer-events: none;
}
.tsp-fx-spot.is-found .tsp-fx-sticker { opacity: 1; }
.tsp-fx-word {
	position: absolute;
	left: 50%;
	top: 100%;
	translate: -50% 0.35em;
	display: grid;
	gap: 0.1em;
	width: max-content;
	max-width: 30cqw;
	padding: 0.35em 0.85em;
	border-radius: 0.9em;
	background: #fff;
	color: #23305a;
	font-size: 1.3em;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.28);
	visibility: hidden;
	pointer-events: none;
	z-index: 2;
}
.tsp-fx-word strong { font-size: 1.15em; font-weight: 900; color: var(--tsp-vocab, #7c3aed); }
.tsp-fx-word span { font-size: 0.78em; color: #4b587a; }
.tsp-fx-word.is-above { top: auto; bottom: 100%; translate: -50% -0.35em; }
.tsp-fx-word.is-left { left: 0; translate: 0 0.35em; }
.tsp-fx-word.is-right { left: auto; right: 0; translate: 0 0.35em; }
.tsp-fx-word.is-above.is-left, .tsp-fx-word.is-above.is-right { translate: 0 -0.35em; }
.tsp-fx-spot.is-found .tsp-fx-word { visibility: visible; }
.tsp-still .tsp-fx-spot.has-hint::before { animation: none; }

/* ------------------------------------------------ panel of explore / choice */

.tsp-fx-panel-head { display: flex; align-items: center; gap: 0.6em; }
.tsp-fx-panel-icon { font-size: 1.8em; line-height: 1; }
.tsp-fx-prompt { margin: 0; font-size: 1.25em; font-weight: 800; color: #23305a; }
.tsp-fx-count { margin: 0.5em 0 0; font-weight: 700; color: #4b587a; }
.tsp-fx-actions { display: flex; justify-content: flex-end; margin-top: 0.8em; }
.tsp-fx-continue:disabled { opacity: 0.45; cursor: not-allowed; }

.tsp-fx-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; margin-top: 0.9em; }
.tsp-fx-choice {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: 4.2em;
	padding: 0.8em 1em;
	border: 3px solid #d6def0;
	border-radius: 1.2em;
	background: #fff;
	color: #23305a;
	font: inherit;
	font-size: 1.1em;
	font-weight: 800;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 0.3em 0 #d6def0;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, opacity 0.2s;
}
.tsp-fx-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--tsp-accent, #4d96ff); box-shadow: 0 0.4em 0 #b9c8ea; }
.tsp-fx-choice:focus-visible { outline: 0.2em solid #ffd23f; outline-offset: 0.2em; }
.tsp-fx-choice-emoji { font-size: 2em; line-height: 1; }
.tsp-fx-choice.is-picked { border-color: #6bcb77; background: #eefbef; box-shadow: 0 0.3em 0 #a6e3ad; }
.tsp-fx-choices.is-done .tsp-fx-choice:not(.is-picked) { opacity: 0.45; }
@media (max-width: 560px) { .tsp-fx-choices { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- celebrate */

.tsp-fx-cheer { display: grid; justify-items: center; gap: 0.3em; text-align: center; }
.tsp-fx-cheer-badge { font-size: 15cqw; line-height: 1; filter: drop-shadow(0 0.06em 0.08em rgba(0, 0, 0, 0.35)); }
.tsp-fx-cheer-msg {
	padding: 0.1em 0.5em;
	font-size: 6cqw;
	font-weight: 900;
	line-height: 1.1;
	color: #fff;
	-webkit-text-stroke: 0.09em #23305a;
	paint-order: stroke fill;
	text-shadow: 0 0.08em 0 #23305a, 0 0.2em 0.4em rgba(0, 0, 0, 0.3);
}

/* Celebrate: badge shapes, a title under the badge, and the pictures-only parties (2.49) */
.tsp-fx-cheer-emoji { display: block; line-height: 1; }
.tsp-fx-cheer-badge[class*="is-look-"] { display: grid; place-items: center; width: 1.25em; height: 1.25em; position: relative; }
.tsp-fx-cheer-badge[class*="is-look-"] .tsp-fx-cheer-emoji { font-size: 0.62em; position: relative; z-index: 1; }
.tsp-fx-cheer-badge.is-look-medal { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc83d 55%, #e39a10); box-shadow: inset 0 0 0 0.05em #fff3b0, inset 0 0 0 0.09em #c98a0a, 0 0.06em 0.12em rgba(0, 0, 0, 0.35); }
.tsp-fx-cheer-badge.is-look-ribbon { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe1ea, #ff7aa2 60%, #e0446f); box-shadow: inset 0 0 0 0.05em #fff, 0 0.06em 0.12em rgba(0, 0, 0, 0.35); margin-bottom: 0.22em; }
.tsp-fx-cheer-badge.is-look-ribbon::before, .tsp-fx-cheer-badge.is-look-ribbon::after { content: ""; position: absolute; bottom: -0.3em; width: 0.3em; height: 0.45em; background: #e0446f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); z-index: 0; }
.tsp-fx-cheer-badge.is-look-ribbon::before { left: 0.25em; transform: rotate(12deg); }
.tsp-fx-cheer-badge.is-look-ribbon::after { right: 0.25em; transform: rotate(-12deg); }
.tsp-fx-cheer-badge.is-look-shield { background: linear-gradient(160deg, #7fb2ff, #3e64de); clip-path: polygon(50% 0, 100% 14%, 92% 66%, 50% 100%, 8% 66%, 0 14%); filter: drop-shadow(0 0.06em 0.08em rgba(0, 0, 0, 0.35)); }
.tsp-fx-cheer-badge.is-look-burst { background: radial-gradient(circle, #fff3b0, #ffb300); clip-path: polygon(50% 0, 61% 14%, 79% 9%, 82% 27%, 100% 32%, 90% 48%, 100% 64%, 82% 71%, 79% 90%, 61% 85%, 50% 100%, 39% 85%, 21% 90%, 18% 71%, 0 64%, 10% 48%, 0 32%, 18% 27%, 21% 9%, 39% 14%); }
.tsp-fx-cheer-title {
	padding: 0.12em 0.9em;
	border-radius: 999px;
	background: #23305a;
	color: #ffe27a;
	font-size: 3.4cqw;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.3);
}
.tsp-fx-party { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.tsp-fx-streamer { position: absolute; top: 0; width: 1.1cqw; border-radius: 1cqw; opacity: 0.95; }
.tsp-fx-sparkle { position: absolute; font-size: 5cqw; line-height: 1; opacity: 0; filter: drop-shadow(0 0 0.25em rgba(255, 230, 120, 0.9)); }
.tsp-fx-rain { position: absolute; top: 0; line-height: 1; filter: drop-shadow(0 0.05em 0.05em rgba(0, 0, 0, 0.3)); }