/* Equalise shared artwork: colour tones, helper character, speech bubble */

/* Tones used by tiles, cards and confetti (also outside .eq-game for the drag ghost). */
.tone-sky { --tone: #5cc2ff; --tone-edge: #2fa2ea; --tone-light: #ddf3ff; }
.tone-mint { --tone: #4fddaa; --tone-edge: #28c48c; --tone-light: #d9f8eb; }
.tone-sun { --tone: #ffd84d; --tone-edge: #f2b91a; --tone-light: #fff3bf; }
.tone-coral { --tone: #ff8a8a; --tone-edge: #f26a6a; --tone-light: #ffe0e0; }
.tone-grape { --tone: #b69cff; --tone-edge: #9576f0; --tone-light: #ede6ff; }
.tone-pink { --tone: #ff9fd2; --tone-edge: #f276b8; --tone-light: #ffe3f2; }
.tone-orange { --tone: #ffb25c; --tone-edge: #f5962e; --tone-light: #ffebd3; }

/* ---------- Helper character ---------- */

.eq-mascot {
	--m-size: 72px;
	flex: none;
	width: var(--m-size);
}

.eq-mascot svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.eq-mascot .m-shadow { fill: rgba(59, 63, 148, 0.14); }
.eq-mascot .m-skin { fill: #5cc2ff; }
.eq-mascot .m-belly,
.eq-mascot .m-arm,
.eq-mascot .m-foot { fill: #2fa2ea; }
.eq-mascot .m-shine { fill: #fff; opacity: 0.45; }
.eq-mascot .m-badge circle { fill: #ffd84d; stroke: #f2b91a; stroke-width: 2; }
.eq-mascot .m-badge rect { fill: #3b3f94; }
.eq-mascot .m-eyes ellipse { fill: #3b3f94; }
.eq-mascot .m-glint { fill: #fff; }
.eq-mascot .m-cheek { fill: #ff9fd2; opacity: 0.85; }
.eq-mascot .m-mouth { fill: none; stroke: #3b3f94; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.eq-mascot .m-open { fill: #3b3f94; stroke-width: 3; }
.eq-mascot .m-open,
.eq-mascot .m-worry { display: none; }

.eq-mascot.is-happy .m-smile,
.eq-mascot.is-party .m-smile,
.eq-mascot.is-wave .m-smile,
.eq-mascot.is-worried .m-smile { display: none; }

.eq-mascot.is-happy .m-open,
.eq-mascot.is-party .m-open,
.eq-mascot.is-wave .m-open,
.eq-mascot.is-worried .m-worry { display: inline; }

.eq-mascot .m-body,
.eq-mascot .m-shadow {
	transform-box: view-box;
	transform-origin: 60px 120px;
}

.eq-mascot .m-body { animation: m-bob 2.6s ease-in-out infinite; }
.eq-mascot .m-eyes {
	transform-box: fill-box;
	transform-origin: center;
	animation: m-blink 4.2s infinite;
}

.eq-mascot .m-arm {
	transform-box: fill-box;
	transform-origin: 50% 15%;
}

.eq-mascot.is-happy .m-body { animation: m-jump 0.75s cubic-bezier(0.3, 1.6, 0.6, 1); }
.eq-mascot.is-happy .m-arm-l { animation: m-wave-l 0.35s ease-in-out 2; }
.eq-mascot.is-happy .m-arm-r { animation: m-wave-r 0.35s ease-in-out 2; }
.eq-mascot.is-worried .m-body { animation: m-shake 0.55s ease; }
.eq-mascot.is-worried .m-skin { fill: #8fd3ff; }
.eq-mascot.is-party .m-body { animation: m-party 1s ease-in-out infinite; }
.eq-mascot.is-party .m-arm-l { animation: m-wave-l 0.5s ease-in-out infinite; }
.eq-mascot.is-party .m-arm-r { animation: m-wave-r 0.5s ease-in-out infinite; }
.eq-mascot.is-wave .m-arm-r { animation: m-wave-r 0.7s ease-in-out infinite; }

@keyframes m-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes m-blink {
	0%, 92%, 100% { transform: scaleY(1); }
	95% { transform: scaleY(0.1); }
}

@keyframes m-jump {
	0% { transform: translateY(0) scale(1, 1); }
	30% { transform: translateY(-20px) scale(0.92, 1.1); }
	60% { transform: translateY(0) scale(1.12, 0.88); }
	80% { transform: translateY(-4px) scale(0.97, 1.03); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes m-shake {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-9deg); }
	40% { transform: rotate(8deg); }
	60% { transform: rotate(-5deg); }
	80% { transform: rotate(3deg); }
}

@keyframes m-party {
	0%, 100% { transform: translateY(0) rotate(0); }
	25% { transform: translateY(-16px) rotate(-10deg); }
	50% { transform: translateY(0) rotate(0) scale(1.06, 0.94); }
	75% { transform: translateY(-16px) rotate(10deg); }
}

@keyframes m-wave-l {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(40deg); }
}

@keyframes m-wave-r {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(-40deg); }
}

.eq-bubble {
	position: relative;
	flex: 1;
	min-width: 0;
	margin-left: 6px;
	padding: 10px 14px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 3px 0 rgba(59, 63, 148, 0.12);
	font-size: clamp(15px, 2.4vw, 18px);
	font-weight: 600;
	line-height: 1.25;
}

.eq-bubble::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -9px;
	border: 9px solid transparent;
	border-right-color: #fff;
	border-left: 0;
	transform: translateY(-50%);
}

.eq-bubble.eq-say {
	animation: eq-say 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes eq-say {
	from { transform: scale(0.85); opacity: 0.4; }
	to { transform: none; opacity: 1; }
}


@media (prefers-reduced-motion: reduce) {
	.eq-mascot *,
	.eq-bubble {
		animation: none !important;
	}
}

/* Number tiles with a custom colour that is light: dark numbers stay readable. */
.is-custom-tile.is-light-tile,
button.is-custom-tile.is-light-tile,
button.is-custom-tile.is-light-tile:hover,
button.is-custom-tile.is-light-tile:focus {
	color: #3b3f94 !important;
	text-shadow: none !important;
}