/* purpose: Type Quest visuals for kids and parent reports */
/* author: MD Hub */
/* date: 2026-10-05 */

.ts-app{
	--ink:#f7f3ea;
	--gold:#f5c542;
	--teal:#7ef0dc;
	--deep:#120a32;
	--card:rgba(18,10,50,.72);
	position:relative;
	min-height:70vh;
	color:var(--ink);
	background:
		radial-gradient(circle at 12% 18%, rgba(245,197,66,.28), transparent 26%),
		radial-gradient(circle at 88% 8%, rgba(126,240,220,.22), transparent 24%),
		linear-gradient(180deg, #24145c 0%, #120a32 55%, #0b0720 100%);
	background-size:cover;
	background-position:center;
	border-radius:22px;
	padding:16px;
	overflow:hidden;
	box-shadow:0 18px 50px rgba(18,10,50,.28);
}
.ts-app:fullscreen,
.ts-app:-webkit-full-screen{
	min-height:100%;
	border-radius:0;
	overflow:auto;
}
.ts-wait{margin:28px 8px;font-size:1.05rem}
.ts-top{
	display:flex;
	align-items:center;
	gap:12px;
	margin:0 0 14px;
}
.ts-owl{
	width:64px;
	height:64px;
	border-radius:18px;
	object-fit:cover;
	box-shadow:0 10px 24px rgba(0,0,0,.35);
	background:#1b1248;
	flex:0 0 auto;
}
.ts-kicker{
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gold);
	font-weight:700;
}
.ts-top h1{
	margin:0;
	font-size:1.55rem;
	line-height:1.15;
}
.ts-tools{
	margin-left:auto;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
}
.ts-tool{
	border:1px solid rgba(247,243,234,.28);
	background:rgba(255,255,255,.08);
	color:var(--ink);
	border-radius:999px;
	padding:8px 12px;
	font-weight:700;
	font-size:13px;
	cursor:pointer;
	text-decoration:none;
	min-height:40px;
}
.ts-tool.on{background:var(--gold);color:#2a1b05;border-color:transparent}
.ts-hero,.ts-card,.ts-lesson,.ts-game,.ts-result,.ts-panel{
	background:var(--card);
	border:1px solid rgba(247,243,234,.14);
	border-radius:18px;
	box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.ts-hero,.ts-result,.ts-panel{padding:16px}
.ts-hero{
	display:grid;
	grid-template-columns:96px 1fr;
	gap:14px;
	align-items:center;
	margin:0 0 14px;
}
.ts-hero img,.ts-result img,.ts-game img{
	width:96px;
	height:96px;
	object-fit:cover;
	border-radius:16px;
	background:#1b1248;
}
.ts-hero h2,.ts-result h2{margin:0 0 6px;font-size:1.45rem}
.ts-hero p,.ts-note{margin:0;color:rgba(247,243,234,.82);line-height:1.45}
.ts-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ts-btn{
	border:0;
	border-radius:14px;
	padding:12px 16px;
	font-weight:800;
	font-size:1rem;
	cursor:pointer;
	min-height:48px;
}
.ts-btn.gold{background:linear-gradient(180deg,#ffe27a,#f5c542);color:#2a1b05}
.ts-btn.ghost{
	background:transparent;
	color:var(--ink);
	border:1px solid rgba(247,243,234,.3);
}
.ts-link{
	background:none;
	border:0;
	color:var(--teal);
	font-weight:700;
	cursor:pointer;
	padding:8px 0;
	text-decoration:underline;
}
.ts-path,.ts-games,.ts-kids{display:grid;gap:10px;margin:12px 0}
.ts-path{grid-template-columns:1fr}
.ts-games{grid-template-columns:repeat(4,1fr)}
.ts-gem{font-size:1.8rem;line-height:1}
.ts-swarm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0;min-height:180px}
.ts-starfield{
	position:relative;height:280px;margin:8px 0;border-radius:18px;overflow:hidden;
	background:radial-gradient(circle at 50% 20%,#4338ca 0%,#0f172a 62%,#020617 100%);
}
.ts-catch-star{position:absolute;width:120px;margin-left:-20px;z-index:1;text-align:center}
.ts-basket{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:2.4rem;z-index:2}
.ts-orchard{
	position:relative;height:340px;margin:8px 0;border-radius:18px;overflow:hidden;
	background:linear-gradient(#7ec8f8 0%,#d7f1ff 46%,#b7e39a 46%,#4f9a45 100%);
	perspective:780px;
	--g:.08;
}
.ts-sun{
	position:absolute;top:16px;right:22px;width:54px;height:54px;border-radius:50%;
	background:radial-gradient(circle at 35% 35%,#fff7c2,#f6b73c 55%,#e08a12);
	box-shadow:0 0 28px 10px rgba(255,210,80,.55);
}
.ts-cloud{position:absolute;height:22px;border-radius:20px;background:rgba(255,255,255,.85);filter:blur(.2px)}
.ts-cloud:before,.ts-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.ts-cloud.c1{top:28px;left:18px;width:70px}
.ts-cloud.c1:before{width:28px;height:28px;top:-14px;left:10px}
.ts-cloud.c1:after{width:36px;height:36px;top:-18px;left:28px}
.ts-cloud.c2{top:52px;left:86px;width:46px;opacity:.8}
.ts-hill{
	position:absolute;left:-10%;right:-10%;bottom:0;height:120px;
	background:radial-gradient(120% 90% at 50% 0%,#8fd36a 0%,#3e8a38 70%);
	transform:rotateX(58deg);transform-origin:center bottom;
	box-shadow:inset 0 18px 24px rgba(255,255,255,.18);
}
.ts-tree{
	position:absolute;left:50%;bottom:46px;width:220px;height:250px;margin-left:-110px;
	transform-style:preserve-3d;
	transform:scale(calc(.28 + var(--g) * .82)) rotateY(-12deg);
	transform-origin:50% 100%;
	transition:transform .45s ease, filter .4s ease;
	filter:drop-shadow(10px 16px 8px rgba(20,40,10,.28));
}
.ts-shadow{
	position:absolute;left:48px;bottom:2px;width:120px;height:18px;border-radius:50%;
	background:rgba(20,50,16,.28);transform:rotateX(70deg);filter:blur(1px);
}
.ts-sprout{
	position:absolute;left:102px;bottom:8px;width:8px;height:36px;border-radius:8px;
	background:linear-gradient(#7dce4a,#2f7a28);
	opacity:calc(1 - clamp(0, (var(--g) - .12) * 5, 1));
}
.ts-sprout:before,.ts-sprout:after{
	content:"";position:absolute;width:18px;height:12px;border-radius:12px 12px 12px 2px;
	background:radial-gradient(circle at 30% 30%,#d9ff9a,#3aaa32);
}
.ts-sprout:before{left:-14px;top:6px;transform:rotate(-28deg)}
.ts-sprout:after{left:6px;top:2px;transform:rotate(32deg)}
.ts-trunk{
	position:absolute;left:96px;bottom:6px;width:28px;
	height:calc(18px + var(--g) * 132px);
	border-radius:16px 16px 8px 8px;
	background:linear-gradient(90deg,#4a2a12,#d7a15a 38%,#8a5a2b 62%,#3a220f);
	box-shadow:inset -7px 0 8px rgba(0,0,0,.28), 3px 0 0 rgba(255,255,255,.12);
	transform:translateZ(10px);
	opacity:clamp(0, (var(--g) - .1) * 6, 1);
}
.ts-limb{
	position:absolute;height:10px;border-radius:8px;
	background:linear-gradient(#a56b32,#5a3416);
	transform-origin:left center;
	opacity:clamp(0, (var(--g) - .28) * 4, 1);
}
.ts-limb.l1{left:108px;bottom:118px;width:62px;transform:rotate(-28deg) translateZ(8px)}
.ts-limb.l2{left:58px;bottom:108px;width:58px;transform:rotate(32deg) translateZ(6px);transform-origin:right center}
.ts-limb.l3{left:100px;bottom:146px;width:48px;transform:rotate(-8deg) translateZ(14px)}
.ts-ball{
	position:absolute;border-radius:50%;
	background:radial-gradient(circle at 32% 28%,#e7ffb0,#46b43a 42%,#1d6a28 78%);
	box-shadow:inset -14px -18px 18px rgba(0,0,0,.22), inset 8px 8px 12px rgba(255,255,255,.25);
	opacity:clamp(0, (var(--g) - .22) * 3.2, 1);
	transform:translateZ(18px);
}
.ts-ball.p1{left:48px;bottom:112px;width:92px;height:78px}
.ts-ball.p2{left:92px;bottom:128px;width:100px;height:86px;transform:translateZ(28px)}
.ts-ball.p3{left:28px;bottom:148px;width:78px;height:70px;transform:translateZ(8px)}
.ts-ball.p4{left:108px;bottom:168px;width:72px;height:64px}
.ts-ball.p5{left:70px;bottom:176px;width:64px;height:58px;transform:translateZ(22px)}
.ts-apple{
	position:absolute;width:16px;height:16px;border-radius:50%;
	background:radial-gradient(circle at 32% 30%,#ffd0c8,#e23b2f 46%,#8e140e);
	box-shadow:inset -3px -3px 4px rgba(0,0,0,.28), 0 4px 4px rgba(0,0,0,.2);
	opacity:0;transform:translateZ(36px) scale(.4);
	transition:opacity .25s ease, transform .25s ease;
}
.ts-apple:before{content:"";position:absolute;left:6px;top:-5px;width:2px;height:6px;background:#3d6b22;border-radius:2px}
.ts-apple.on{opacity:1;transform:translateZ(36px) scale(1)}
.ts-apple.a1{left:70px;bottom:150px}.ts-apple.a2{left:118px;bottom:168px}
.ts-apple.a3{left:146px;bottom:138px}.ts-apple.a4{left:52px;bottom:128px}
.ts-apple.a5{left:96px;bottom:196px}.ts-apple.a6{left:132px;bottom:112px}
.ts-apple.a7{left:84px;bottom:118px}.ts-apple.a8{left:160px;bottom:158px}
.ts-orchard.wilt .ts-tree{filter:saturate(.35) hue-rotate(-18deg) drop-shadow(10px 16px 8px rgba(40,20,10,.3))}
.ts-orchard.dead .ts-tree{transform:scale(.16) rotateY(-12deg) rotateZ(18deg);filter:grayscale(.85) brightness(.7)}
.ts-orchard.dead .ts-apple{opacity:0}
.ts-sap{position:absolute;left:14px;right:14px;bottom:10px;height:8px;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden}
.ts-sap i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#fbbf24,#f97316)}
.ts-orchard.wilt .ts-sap i{background:#b91c1c}
.ts-garden{min-height:180px;margin:8px 0;text-align:center}
.ts-plant{font-size:4.5rem;line-height:1;display:inline-block;transition:transform .2s ease}
.ts-blooms{margin-top:8px;font-size:1.6rem;letter-spacing:.2em}
.ts-blooms .got{opacity:1}
.ts-blooms span{opacity:.35}
.ts-sea{position:relative;height:230px;margin:8px 0;border-radius:18px;overflow:hidden;background:linear-gradient(#7dd3fc,#0369a1 70%)}
.ts-diver{position:absolute;left:18%;font-size:2.6rem;transition:top .2s linear}
.ts-chest{position:absolute;right:16%;bottom:28px;font-size:2.4rem}
.ts-air{position:absolute;left:12px;right:12px;bottom:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.ts-air i{display:block;height:100%;width:100%;background:#86efac}
.ts-cliff{
	position:relative;height:380px;margin:8px 0;border-radius:18px;overflow:hidden;
	background:linear-gradient(180deg,#8ec5ef 0%,#d5ecfb 28%,#9aa8b4 28%,#6d5848 100%);
}
.ts-mtn{position:absolute;left:-8%;right:-8%;z-index:0;pointer-events:none}
.ts-mtn.far{
	top:22%;height:46%;
	background:linear-gradient(#c5d5e4,#8ea0b0);
	clip-path:polygon(0 70%,12% 48%,24% 62%,38% 28%,52% 58%,66% 22%,80% 50%,100% 36%,100% 100%,0 100%);
}
.ts-mtn.mid{
	top:34%;height:50%;
	background:linear-gradient(#8d7564,#5c4638);
	clip-path:polygon(0 78%,8% 60%,18% 40%,30% 62%,42% 34%,54% 58%,68% 26%,82% 52%,94% 38%,100% 58%,100% 100%,0 100%);
}
.ts-mtn.near{
	bottom:0;height:58%;
	background:linear-gradient(180deg,#6b5344 0%,#4a382e 55%,#3a2c24 100%);
	clip-path:polygon(0 42%,10% 28%,22% 48%,34% 18%,48% 40%,62% 12%,76% 36%,88% 20%,100% 34%,100% 100%,0 100%);
}
.ts-ridge{
	position:absolute;left:0;right:0;top:30%;height:18%;z-index:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
	clip-path:polygon(34% 78%,42% 20%,50% 70%,62% 8%,70% 64%,76% 28%,84% 72%,68% 100%,48% 100%);
	opacity:.9;
}
.ts-cliff .ts-sap{z-index:3}
.ts-hold{
	position:absolute;width:96px;margin-left:-48px;text-align:center;z-index:1;opacity:.72;
}
.ts-hold.live{opacity:1}
.ts-hold.used{opacity:.55}
.ts-hold b{
	display:inline-block;min-width:64px;padding:3px 6px;border-radius:12px;
	background:rgba(41,28,22,.82);color:#f5f5f4;font-size:.86rem;
}
.ts-hold.live b{background:#fff7e6;color:#2a1848}
.ts-hold.on b{box-shadow:0 0 0 2px #f59e0b}
.ts-hold .ts-ch.done{color:#0f766e}
.ts-hold .ts-ch.now{color:#c2410c}
.ts-climber{
	position:absolute;z-index:2;font-size:2rem;transition:left .35s ease, top .35s ease;
}
.ts-climber.fall{transition:top .6s ease-in;transform:rotate(70deg)}
.ts-launch{position:relative;height:260px;margin:8px 0;border-radius:18px;overflow:hidden;background:linear-gradient(#1e1b4b,#312e81 40%,#fb923c)}
.ts-moon{position:absolute;top:10px;right:16px;font-size:2rem}
.ts-rocket{position:absolute;left:50%;margin-left:-18px;font-size:2.6rem;transition:bottom .2s linear}
.ts-rocket.sinking{transform:rotate(8deg)}
.ts-star-face{
	display:inline-block;font-size:3rem;line-height:1;
	animation:ts-starspin 1.6s ease-in-out infinite;
	filter:drop-shadow(0 0 10px #fde68a);
}
.ts-catch-star.on .ts-star-face{animation-duration:.9s}
@keyframes ts-starspin{
	0%{transform:rotate(-16deg) scale(.86)}
	50%{transform:rotate(18deg) scale(1.18)}
	100%{transform:rotate(-16deg) scale(.86)}
}
.ts-swarm-item{text-align:center;font-size:2.6rem;transition:opacity .2s linear}
.ts-swarm-item b{display:block;margin-top:4px;font-size:1.05rem;font-weight:800;color:#2a1848;background:#fff7e6;border-radius:12px;padding:4px}
.ts-swarm-item .ts-ch.done{color:#0f766e}
.ts-swarm-item .ts-ch.now{color:#c2410c}
.ts-swarm-item.pop{animation:ts-pop .42s ease}
.ts-goal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 12px;font-size:2rem}
.ts-goal .got{filter:none;transform:scale(1.05)}
.ts-goal span{opacity:.35}
.ts-goal span.got{opacity:1}
.ts-lesson,.ts-game{
	text-align:left;
	color:inherit;
	padding:12px;
	cursor:pointer;
	width:100%;
}
.ts-lesson{display:flex;gap:10px;align-items:center}
.ts-lesson b,.ts-game b{display:block;font-size:1.02rem}
.ts-lesson span,.ts-game span{display:block;color:rgba(247,243,234,.78);font-size:.92rem;margin-top:2px}
.ts-step{
	width:36px;
	height:36px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:#2a1860;
	font-weight:800;
	flex:0 0 auto;
}
.ts-lesson.done{outline:2px solid rgba(126,240,220,.45)}
.ts-lesson.locked,.ts-game.locked{opacity:.55;cursor:default}
.ts-stars{color:var(--gold);letter-spacing:2px;font-size:1.1rem}
.ts-tabs{display:flex;gap:8px;margin:0 0 12px}
.ts-tab{
	border:1px solid rgba(247,243,234,.25);
	background:transparent;
	color:var(--ink);
	border-radius:999px;
	padding:8px 14px;
	font-weight:800;
	cursor:pointer;
	min-height:42px;
}
.ts-tab.on{background:var(--gold);color:#2a1b05;border-color:transparent}
.ts-kids{grid-template-columns:repeat(3,1fr)}
.ts-kid{
	border:1px solid rgba(247,243,234,.2);
	background:rgba(255,255,255,.06);
	color:inherit;
	border-radius:16px;
	padding:12px;
	text-align:left;
	cursor:pointer;
	min-height:74px;
}
.ts-kid.on{outline:3px solid var(--gold)}
.ts-kid b{display:block;font-size:1.05rem}
.ts-kid span{color:rgba(247,243,234,.75);font-size:.85rem}
.ts-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 12px}
.ts-metric{
	background:rgba(255,255,255,.06);
	border-radius:14px;
	padding:10px;
}
.ts-metric b{display:block;font-size:1.35rem}
.ts-metric span{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(247,243,234,.7)}
.ts-chart{width:100%;height:auto;display:block}
.ts-legend{display:flex;gap:14px;font-size:.85rem;margin:4px 0 8px}
.ts-legend i{display:inline-block;width:12px;height:12px;border-radius:99px;margin-right:6px}
.ts-legend .wpm{background:var(--gold)}
.ts-legend .acc{background:var(--teal)}
.ts-table{width:100%;border-collapse:collapse;font-size:.92rem}
.ts-table th,.ts-table td{text-align:left;padding:8px 6px;border-bottom:1px solid rgba(247,243,234,.12)}
.ts-hud{
	display:flex;
	gap:8px;
	margin:0 0 10px;
}
.ts-hud div{
	flex:1;
	background:rgba(255,255,255,.08);
	border-radius:14px;
	padding:8px 10px;
}
.ts-hud b{display:block;font-size:1.25rem}
.ts-hud span{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(247,243,234,.7)}
.ts-tip{margin:0 0 10px;color:rgba(247,243,234,.84)}
.ts-line{
	font-size:1.45rem;
	line-height:1.7;
	letter-spacing:.02em;
	background:rgba(0,0,0,.22);
	border-radius:16px;
	padding:14px;
	min-height:4.5rem;
	white-space:pre-wrap;
	overflow-wrap:break-word;
}
.ts-ch{display:inline;white-space:pre-wrap}
.ts-ch.done{color:#d9fff6}
.ts-ch.now{color:var(--gold);border-bottom:3px solid var(--gold)}
.ts-ch.bad{color:#fb7185;border-bottom:3px solid #fb7185}
.ts-input{
	width:100%;
	box-sizing:border-box;
	margin:10px 0;
	padding:12px 14px;
	border-radius:14px;
	border:2px solid rgba(245,197,66,.55);
	background:rgba(255,255,255,.1);
	color:var(--ink);
	font-size:1.15rem;
}
.ts-next{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	background:rgba(255,255,255,.08);
	border-radius:16px;
	padding:10px 12px;
	margin:0 0 10px;
}
.ts-next b{font-size:1.8rem;color:var(--gold)}
.ts-keys{display:grid;gap:6px;margin-top:8px}
.ts-keys[hidden]{display:none}
.ts-keyrow{display:flex;gap:4px;justify-content:center}
.ts-key{
	min-width:28px;
	height:36px;
	padding:0 6px;
	border-radius:8px;
	display:grid;
	place-items:center;
	background:rgba(255,255,255,.08);
	color:rgba(247,243,234,.8);
	font-size:13px;
	font-weight:700;
}
.ts-key.home{box-shadow:inset 0 -3px 0 rgba(245,197,66,.7)}
.ts-key.on{background:var(--gold);color:#2a1b05}
.ts-key.wide{min-width:140px}
.ts-sky,.ts-river{
	position:relative;
	height:168px;
	border-radius:18px;
	overflow:hidden;
	margin:8px 0;
}
.ts-sky{
	height:210px;
	background:linear-gradient(180deg,#120a3a 0%,#3b1d8a 55%,#f59e6a 100%);
}
.ts-star{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85;animation:ts-twinkle 1.6s ease-in-out infinite}
.ts-star.s1{top:18px;left:12%}
.ts-star.s2{top:36px;left:70%;animation-delay:.4s}
.ts-star.s3{top:70px;left:28%;animation-delay:.8s}
.ts-star.s4{top:22px;left:46%;width:4px;height:4px;animation-delay:1.1s}
.ts-rock{
	position:absolute;
	left:50%;
	top:0;
	z-index:1;
	width:128px;
	height:128px;
	margin-left:-64px;
	object-fit:contain;
	background:transparent;
	animation:ts-wobble .55s ease-in-out infinite;
	filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));
	pointer-events:none;
}
.ts-rock.hot{filter:drop-shadow(0 0 16px #fb7185) drop-shadow(0 8px 6px rgba(0,0,0,.35));animation-duration:.28s}
.ts-rock-emoji{font-size:4rem;line-height:128px;text-align:center}
.ts-meteor-word,.ts-race-word{
	margin:0 0 8px;
	min-height:0;
	text-align:center;
	font-size:1.7rem;
	font-weight:800;
	color:#2a1848;
	background:#fff7e6;
	box-shadow:0 6px 0 rgba(42,24,72,.18);
}
.ts-meteor-word .ts-ch.done,.ts-race-word .ts-ch.done{color:#0f766e}
.ts-meteor-word .ts-ch.now,.ts-race-word .ts-ch.now{color:#c2410c;border-bottom-color:#c2410c}
.ts-cheer{
	position:absolute;
	right:12px;
	top:12px;
	font-size:1.6rem;
	color:#ffe27a;
	opacity:0;
	pointer-events:none;
}
.ts-cheer.go{animation:ts-cheer .7s ease}
.ts-floatwrap{position:relative;margin:8px 0}
.ts-floatwrap .ts-cheer{z-index:3;color:#b45309}
.ts-float{
	position:relative;
	height:340px;
	margin:0;
	border-radius:18px;
	overflow:hidden;
	margin:8px 0;
	background:linear-gradient(180deg,#dbeafe 0%,#e0f2fe 62%,#bbf7d0 100%);
}
.ts-balloon{
	position:absolute;
	width:112px;
	margin-left:-56px;
	text-align:center;
	z-index:1;
	will-change:left,top;
}
.ts-balloon img,.ts-balloon-face{width:78px;height:78px;object-fit:cover;border-radius:50%;display:inline-block;font-size:3.2rem;line-height:78px}
.ts-balloon.on img,.ts-balloon.on .ts-balloon-face{transform:scale(1.08)}
.ts-balloon.pop{animation:ts-pop .42s ease}
.ts-balloon b{
	display:block;
	margin-top:4px;
	font-size:1.05rem;
	font-weight:800;
	color:#2a1848;
	background:#fff7e6;
	border-radius:12px;
	padding:3px 4px;
}
.ts-balloon .ts-ch.done{color:#0f766e}
.ts-balloon .ts-ch.now{color:#c2410c;border-bottom-color:#c2410c}
.ts-float .ts-cheer{z-index:3;color:#b45309}
.ts-river{
	height:230px;
	background:linear-gradient(180deg,#bae6fd 0%,#38bdf8 28%,#0284c7 70%,#0369a1 100%);
}
.ts-wave{
	position:absolute;left:-20%;width:140%;height:16px;border-radius:50%;
	background:rgba(255,255,255,.38);animation:ts-wave 1.6s linear infinite;
}
.ts-wave{top:46px}
.ts-wave.w2{top:118px;opacity:.5;animation-duration:2.1s}
.ts-wave.w3{top:186px;opacity:.35;animation-duration:1.3s}
.ts-flag{position:absolute;right:8px;top:8px;font-size:1.8rem;z-index:3}
.ts-lane{position:absolute;left:0;right:46px;height:86px}
.ts-lane.lane-you{top:28px}
.ts-lane.lane-duck{top:124px}
.ts-lane-name{
	position:absolute;left:8px;top:-2px;font-size:.72rem;font-weight:800;
	letter-spacing:.04em;text-transform:uppercase;color:#f8fafc;text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.ts-boatimg,.ts-duck{
	position:absolute;left:0;bottom:0;width:76px;height:76px;object-fit:contain;background:transparent;
	border-radius:0;transition:left .45s ease;animation:ts-bob 1.1s ease-in-out infinite;
	font-size:3rem;line-height:76px;text-align:center;filter:drop-shadow(0 6px 0 rgba(0,0,0,.2));
}
.ts-boatimg.boost{transform:translateY(-8px) scale(1.06)}
.ts-duck{width:128px;height:72px;object-fit:contain;animation-duration:.9s}
.ts-lives{color:#fb7185;font-weight:800;margin:4px 0 8px}
@keyframes ts-twinkle{50%{opacity:.2;transform:scale(.6)}}
@keyframes ts-wobble{50%{transform:rotate(12deg)}}
@keyframes ts-float{50%{transform:translateY(-16px)}}
@keyframes ts-pop{40%{transform:scale(1.2)}100%{transform:scale(.2);opacity:0}}
@keyframes ts-cheer{0%{opacity:0;transform:translateY(8px)}30%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
@keyframes ts-wave{from{transform:translateX(0)}to{transform:translateX(24px)}}
@keyframes ts-bob{50%{transform:translateY(-6px) rotate(-4deg)}}
@media (max-width: 800px){
	.ts-app{padding:12px;border-radius:0}
	.ts-top{align-items:flex-start}
	.ts-top h1{font-size:1.3rem}
	.ts-owl{width:52px;height:52px}
	.ts-tools{width:100%}
	.ts-tool{flex:1}
	.ts-hero{grid-template-columns:72px 1fr}
	.ts-hero img{width:72px;height:72px}
	.ts-games,.ts-kids,.ts-metrics{grid-template-columns:1fr}
	.ts-line{font-size:1.25rem}
	.ts-table thead{display:none}
	.ts-table tr{display:block;margin:0 0 8px;background:rgba(255,255,255,.05);border-radius:12px;padding:6px}
	.ts-table td{display:flex;justify-content:space-between;border:0;padding:4px 8px}
	.ts-table td:before{content:attr(data-label);color:rgba(247,243,234,.62);margin-right:8px}
}
@media (min-width: 801px){
	.ts-path{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion: reduce){
	.ts-app *{transition:none !important;animation:none !important}
}